@font-face{font-family:Montserrat;src:url(fonts/Montserrat-Variable.ttf) format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:Inter;src:url(fonts/Inter-Variable.ttf) format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:Lato;src:url(fonts/Lato-Bold.ttf) format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Lato;src:url(fonts/Lato-Regular.ttf) format('truetype');font-display:swap}*{box-sizing:border-box}.tr4-page,.tr4{color-scheme:light;--bg:#eaf4ec;--surface:#f7fbf8;--text:#10331f;--muted:#536a5b;--border:#ccdcd1;--field:#f7fbf8}html[data-planora-theme=dark] .tr4-page,html[data-planora-theme=dark] .tr4{color-scheme:dark;--bg:#0b1c13;--surface:#142b1e;--text:#eff8ef;--muted:#b0c8b7;--border:#365342;--field:#102419}body.tr4-page{margin:0;background:var(--bg);color:var(--text);font-family:Lato,'Segoe UI',sans-serif;line-height:1.55}.tr4{width:min(1260px,100%);padding:24px 32px;margin:auto}.tr4-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.tr4-brand{font-size:20px;font-weight:800;text-decoration:none;color:var(--text);display:flex;align-items:center;gap:10px}.tr4-brand img{width:32px;height:32px;object-fit:contain}.tr4-brand span{font-size:12px;font-weight:400;letter-spacing:.08em}.tr4-hero{background:#10331f;color:#f7fbf8;border-radius:24px;padding:32px 36px;margin-bottom:24px;border-left:6px solid #99cc66}.tr4-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#c6e5ba;margin:0}.tr4 h1{font-family:Montserrat,'Segoe UI',sans-serif;font-size:clamp(28px,4vw,42px);line-height:1.15;margin:12px 0 14px;letter-spacing:-.025em}.tr4-hero>p:last-child{max-width:720px;margin-bottom:0}.tr4 h2{font-size:21px;line-height:1.3;margin:0 0 16px}.tr4 h3{font-size:18px;margin:0 0 8px}.tr4 p{overflow-wrap:anywhere}.tr4-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:24px;align-items:start}.tr4-card{padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:20px;margin-bottom:20px;min-width:0;box-shadow:0 6px 18px #064e2e05}.tr4-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.tr4 form{margin:0}.tr4 label{display:flex;flex-direction:column;font-size:13px;font-weight:700;gap:5px;min-width:0}.tr4 input,.tr4 select,.tr4 textarea{font:inherit;min-height:44px;width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--field);color:var(--text)}.tr4 textarea{min-height:88px;resize:vertical}.tr4 input[type=checkbox]{width:22px;min-height:22px}.tr4 .tr4-check{flex-direction:row;align-items:center;gap:12px;min-height:44px}.tr4 button,.tr4 .tr4-button{font:inherit;font-size:14px;min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.tr4 button.primary,.tr4 .primary{background:#087f5b;color:#fff;border-color:#087f5b}.tr4 :focus-visible{outline:3px solid #99cc66;outline-offset:3px}.tr4-form{display:grid;gap:14px}.tr4-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tr4-note{color:var(--muted);font-size:14px}.tr4-status{display:inline-block;padding:4px 9px;font-size:11px;letter-spacing:.04em;border:1px solid var(--border);border-radius:6px;font-weight:700}.tr4-message{padding:16px 20px;border:1px solid #087f5b;border-left-width:5px;background:var(--surface);border-radius:12px;margin-bottom:20px;overflow-wrap:anywhere}.tr4-message.error{border-color:#bd6a47}.tr4-table{overflow:auto}.tr4 table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.tr4 th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.tr4 td,.tr4 th{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top}.tr4 details{border-top:1px solid var(--border);padding-top:12px;margin-top:14px}.tr4 summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:700}.tr4 details form{margin-top:10px}.tr4 a{color:var(--text);text-underline-offset:3px}.tr4 footer{font-size:12px;color:var(--muted);padding:24px 0}.tr4-pass{max-width:780px;margin:auto}.tr4-pass-qr{background:#fff;color:#10331f;padding:24px;border-radius:16px;width:fit-content;margin:24px auto}.tr4-pass-qr img,.tr4-pass-qr canvas{display:block;max-width:100%;height:auto}.tr4-empty{padding:24px 0;color:var(--muted)}.tr4 dl{display:grid;grid-template-columns:1fr 1.4fr;gap:8px 20px}.tr4 dt{color:var(--muted);font-size:13px}.tr4 dd{margin:0;overflow-wrap:anywhere}.tr4-hidden{display:none}@media(max-width:850px){.tr4-grid{grid-template-columns:1fr}.tr4{padding:16px}.tr4-hero{padding:26px 24px}.tr4-card{padding:20px}.tr4-brand span{display:none}}@media(max-width:430px){.tr4-two{grid-template-columns:1fr}.tr4-header{gap:8px}.tr4-brand{font-size:17px}.tr4 button{padding:10px 12px}}@media(prefers-reduced-motion:no-preference){.tr4-card,.tr4-hero{animation:tr4-enter .22s cubic-bezier(.16,1,.3,1) both}@keyframes tr4-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}@media print{.tr4-header,.tr4-actions,footer{display:none!important}.tr4{padding:0}.tr4-card,.tr4-hero{box-shadow:none;break-inside:avoid}.tr4-hero{background:#fff;color:#10331f}}

.tr4-grid>*{min-width:0}.tr4-row>label{flex:1;max-width:100%}.tr4 input,.tr4 select,.tr4 textarea{max-width:100%;min-width:0}.tr4-table{max-width:100%}

.tr4 .tr4-theme{gap:6px;touch-action:none}.tr4-theme svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}.tr4-theme .tr4-lamp-cord{transform:translateY(var(--planora-pull-y,0px));transform-origin:top}.tr4-theme.is-lit svg{color:#087f5b}html[data-planora-theme=dark] .tr4-theme.is-lit svg{color:#99cc66}

.tr4 button,.tr4 input,.tr4 select,.tr4 label{font-family:Inter,Lato,sans-serif}

/* Inside the shared role shell the shell owns page width, padding and footer. */
.tr4.tr4-in-shell{width:auto;max-width:none;padding:0;margin:0;color:var(--text)}.tr4-in-shell>footer{display:none}
/* The shell forces heading colors; the hero is always a dark forest panel, so pin its text pair (DESIGN.md hero rule). */
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero h1,html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero p:not(.tr4-eyebrow){color:#f7fbf8!important;opacity:1!important}
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero .tr4-eyebrow{color:#c6e5ba!important}
.tr4.tr4-in-shell strong{color:inherit}

/* Panel 22 Oct 2026: destructive actions and compact participant table. */
.tr4 button.danger{background:transparent;color:#a3312a;border-color:#c4554d}
.tr4 button.danger:hover,.tr4 button.danger:focus-visible{background:#a3312a;color:#fff}
/* Summaries stay display:list-item so the disclosure marker shows; padding keeps the 44px touch target. */
.tr4-table td details summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0}
.tr4-table td details[open]{min-width:18rem}
.tr4 aside details.tr4-card>summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0}
html[data-planora-theme="dark"] .tr4 button.danger{color:#ffb3ad;border-color:#ff8a80}
html[data-planora-theme="dark"] .tr4 button.danger:hover,html[data-planora-theme="dark"] .tr4 button.danger:focus-visible{background:#ffb3ad;color:#2a0f0d}

/* Shared button system (implementation prompt 04, 23 Oct 2026): label-sized controls with one weight and visible
   hover, pressed, disabled and loading states. Tokens come from planora-ui-system.css inside the shell. */
.tr4 button,.tr4 .tr4-button{font-weight:700;gap:8px;line-height:1.3;border-radius:var(--pu-radius,12px);transition:background-color .16s,border-color .16s,color .16s}
.tr4 button:hover,.tr4 .tr4-button:hover{border-color:var(--pu-primary,#087f5b)}
.tr4 button.primary:hover,.tr4 .tr4-button.primary:hover{background:var(--pu-primary-hover,#066b4c);border-color:var(--pu-primary-hover,#066b4c);color:#fff}
.tr4 button:active,.tr4 .tr4-button:active{transform:translateY(1px)}
.tr4 button:disabled,.tr4 button[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.tr4 button[aria-busy=true]{cursor:progress}
.tr4-status{cursor:default}
/* Owner design standard (23 Oct 2026): inside the portal the page head is a calm header card, not a dark slide-style
   banner. Surface background, hairline border, ink heading, one muted helper line. Public pages keep their own head. */
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero{background:var(--pu-surface,#fff)!important;background-image:none!important;color:var(--pu-ink,#10331f)!important;border:1px solid var(--pu-line,#c9dacd)!important;box-shadow:0 1px 2px rgba(16,60,40,.06)!important;padding:20px 24px!important;border-radius:14px!important}
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero::before,html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero::after{display:none!important}
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero h1{color:var(--pu-ink,#10331f)!important;font-size:24px!important;line-height:1.25!important;margin:0 0 8px!important}
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero p:not(.tr4-eyebrow){color:var(--pu-muted,#536a5b)!important;font-size:14px!important;line-height:1.5!important;max-width:72ch;margin:0!important}
html[data-planora-theme] body:has(.soft-shell) .soft-main .planning-scope .tr4-in-shell .tr4-hero .tr4-eyebrow{color:var(--pu-muted,#536a5b)!important;font-size:12px!important;margin:0 0 4px!important}
.tr4-pager{align-items:center;justify-content:flex-start;gap:8px 16px;margin-top:16px}
/* Standalone (public) pass and registration pages: a readable title, not a display-size word. */
body.tr4-page .tr4-hero h1{font-size:clamp(24px,2.4vw,30px);line-height:1.2}

/* Even rhythm inside the portal: one 24px gap between blocks, columns start on the same line, no touching cards. */
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell{display:grid;gap:24px;align-content:start}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell>*{margin-top:0!important;margin-bottom:0!important;min-width:0}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell .tr4-grid{gap:24px;align-items:start}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell .tr4-grid>section{display:grid;gap:24px;align-content:start}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell .tr4-grid>section>*{margin-top:0!important;margin-bottom:0!important}
/* Secondary forms on Supplier Management open on demand (one summary line each) so the page is not a wall of fields. */
.tr4-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}
.tr4-disclosure>summary::-webkit-details-marker{display:none}
.tr4-disclosure>summary h2{margin:0!important;font-size:17px}
.tr4-disclosure>summary::after{content:"Open";font:700 13px/1 Inter,sans-serif;color:var(--pu-primary,#087f5b);padding:8px 12px;border:1px solid var(--pu-line,#c9dacd);border-radius:10px}
.tr4-disclosure[open]>summary{margin-bottom:16px}
.tr4-disclosure[open]>summary::after{content:"Close"}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell .tr4-grid>aside{display:grid;gap:24px;align-content:start}
html[data-planora-theme] body:has(.soft-shell) .soft-main .tr4.tr4-in-shell .tr4-grid>aside>*{margin-top:0!important;margin-bottom:0!important}

/* Supplier procurement flow (owner walkthrough B1/B6, 23 Oct 2026): the ordered steps, one card per need with its
   next action, and the quotation comparison table. Status is always written in words, never colour alone. */
.tr4-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tr4-spread{justify-content:space-between}
.tr4-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.tr4-step{border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:grid;gap:2px;font-size:13px;background:var(--surface);min-width:0}
.tr4-step-n{font:700 11px/1.2 Inter,sans-serif;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tr4-step-label{font-weight:700;overflow-wrap:anywhere}
.tr4-step-count{color:var(--muted);font-size:12px}
.tr4-step.is-done{border-color:#087f5b}
.tr4-step.is-done .tr4-step-count{color:#087f5b;font-weight:700}
.tr4-step.is-current{border:2px solid #087f5b;padding:9px 11px}
html[data-planora-theme=dark] .tr4-step.is-done,html[data-planora-theme=dark] .tr4-step.is-current{border-color:#99cc66}
html[data-planora-theme=dark] .tr4-step.is-done .tr4-step-count{color:#c6e5ba}
.tr4-next{border-left:4px solid #087f5b;padding:12px 16px;background:var(--field);border-radius:10px;margin:0 0 12px}
html[data-planora-theme=dark] .tr4-next{border-left-color:#99cc66}
.tr4-next-line{margin:0 0 12px}
.tr4-need[data-tone=blocked] .tr4-status{border-color:#c4554d;color:#a3312a}
.tr4-need[data-tone=ready] .tr4-status,.tr4-need[data-tone=done] .tr4-status{border-color:#087f5b;color:#087f5b}
html[data-planora-theme=dark] .tr4-need[data-tone=blocked] .tr4-status{color:#ffb3ad;border-color:#ff8a80}
html[data-planora-theme=dark] .tr4-need[data-tone=ready] .tr4-status,html[data-planora-theme=dark] .tr4-need[data-tone=done] .tr4-status{color:#c6e5ba;border-color:#99cc66}
.tr4-actions-cell{display:grid;gap:8px;min-width:15rem}
.tr4-actions-cell details{margin-top:0;padding-top:4px}
.tr4 tr.is-not_selected td,.tr4 tr.is-cancelled td{color:var(--muted)}
.tr4-badge{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;background:#e3f2e8;color:#0b5d3f}
html[data-planora-theme=dark] .tr4-badge{background:#1d3b2a;color:#c6e5ba}
.tr4-fieldset{border:1px solid var(--border);border-radius:12px;padding:8px 14px 12px;margin:0;display:flex;flex-wrap:wrap;gap:0 20px}
.tr4-fieldset legend{font-weight:700;font-size:13px;padding:0 6px}
.tr4-disclosure>summary h3{margin:0;font-size:16px}
@media(max-width:600px){.tr4-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.tr4-actions-cell{min-width:12rem}}