/* Design.md concept 3: one shared visual layer, no business state. */
:root{--cb-bg:#F7F7F4;--cb-surface:#fff;--cb-ink:#1A1A18;--cb-muted:#595955;--cb-line:#D8D8D2;--cb-control:#75756F;--cb-selected:#EEEEE9;--cb-accent:#FF5A1F;--cb-accent-text:#B83D16;--cb-notice:#F5F1E6;--ink:var(--cb-ink);--paper:var(--cb-bg);--muted:var(--cb-muted);--line:var(--cb-line);--orange:var(--cb-accent);--accent:var(--cb-accent);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Thonburi","Noto Sans Thai",sans-serif;color:var(--cb-ink);background:var(--cb-bg)}
body{font-size:16px;line-height:1.6}h1{font-size:32px;line-height:1.4;letter-spacing:0;font-weight:800}h2{font-size:22px;line-height:1.45;letter-spacing:0}h3{font-size:18px;line-height:1.5}small,.small,.subtle,.field small,.saved,.note-row,.card-foot,dt{font-size:14px;line-height:1.5}.eyebrow{font-size:12px;letter-spacing:.06em;line-height:1.6}.integration-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;background:#fff;border-bottom:1px solid var(--cb-line);padding:12px max(16px,calc((100vw - 1280px)/2));font-size:14px}.integration-nav strong{font-size:16px}.integration-nav span{color:var(--cb-muted)}.integration-nav a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px;font-weight:600}.integration-nav a:hover{color:var(--cb-accent-text)}
:focus-visible{outline:2px solid var(--cb-ink);outline-offset:3px}button:focus-visible,.button:focus-visible{box-shadow:0 0 0 2px white}button,.button{border-color:var(--cb-control);border-radius:4px;min-height:44px}button.primary,.button.primary{background:var(--cb-ink);border-color:var(--cb-ink);color:#fff}input,select,textarea,.field input,.field select,.field textarea{border-color:var(--cb-control);border-radius:4px;font-size:16px;line-height:1.6}.field label,legend,label{font-size:16px}.panel,.card,.list-card{border-radius:4px;padding:24px;box-shadow:none}.badge,.tag{font-size:13px;line-height:1.5;border-radius:4px;letter-spacing:0}.notice,.callout,.hint{background:var(--cb-notice);color:var(--cb-ink);font-size:14px}.notice{border-left:0}.hint,.callout{border-left:3px solid var(--cb-accent)}.column{background:var(--cb-selected)}.version{border-left-color:var(--cb-ink)}.flow{border-style:solid;background:#fff}.stat{border-top:3px solid var(--cb-ink)}.top h1,.page-top h1,.onboard-head h1{padding-bottom:12px;border-bottom:3px solid var(--cb-accent);width:fit-content}.error,.field-error{color:#9D2424}.choice:has(input:checked){border-color:var(--cb-ink);border-left-width:4px;background:var(--cb-selected)}.choice input{accent-color:var(--cb-ink)}
/* Client keeps a natural mobile reading width, with no decorative phone chrome. */
.masthead,.shell,.footer,.nav{max-width:744px}.masthead{padding:24px 32px}.shell{margin:auto;padding:24px 32px 48px}.footer{padding:24px 32px;margin:auto;font-size:14px}.footer a,.footer .text-button{font-size:14px;min-height:44px}.nav{margin:auto;padding:0 24px 12px}.nav a{font-size:14px;flex:1;text-align:center}.demo-strip{background:var(--cb-notice);font-size:12px;font-weight:500;letter-spacing:0;padding:10px 16px}.demo-strip a{font-size:12px}.brand-caption{font-size:10px}.header-meta{font-size:12px}.brand-mark{border:0;padding:0;font-weight:800;letter-spacing:0}.two-col,.two-equal,.three-col{grid-template-columns:1fr;gap:24px}.hero{grid-template-columns:1fr;min-height:0;padding:8px 0 32px;gap:24px}.hero h1{font-size:40px;line-height:1.2;letter-spacing:-.5px}.hero h1 .accent{color:var(--cb-ink)}.hero .intro{font-size:16px;margin:24px 0;max-width:none}.hero .invite-note{font-size:14px;max-width:none}.poster{display:none}.service-teasers{grid-template-columns:1fr;gap:24px}.teaser p{font-size:16px}.panel.dark,.panel.orange-panel{background:#fff;color:var(--cb-ink);border-color:var(--cb-line);border-top:3px solid var(--cb-accent)}.panel.dark p,.panel.dark .eyebrow{color:var(--cb-muted)}.panel.dark .button:not(.orange){color:var(--cb-ink)}.orange{background:var(--cb-ink)!important;color:#fff!important;border-color:var(--cb-ink)!important}.step{font-size:14px}.onboard-head h1,.page-top h1{font-size:32px}.amount{font-size:28px;line-height:1.4;letter-spacing:0;margin:12px 0}.detail-grid{gap:24px}.check{font-size:16px}.version-tabs a{font-size:14px;border-color:var(--cb-control);min-height:44px}.small-button{font-size:14px;min-height:44px}.callout small{display:inline}.package-number{font-size:28px}.empty{background:#fff}
/* Rate Card owns its picker/detail layout. */
body:has(.workarea) .shell,body:has(.client-shell) .shell{max-width:1280px;padding:0}.review-page{max-width:1000px;margin:32px auto;padding:0 24px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-page .panel{background:white;border:1px solid var(--cb-line)}.review-page h1{margin:12px 0}.review-page a{color:inherit}.review-page .button{display:inline-flex;padding:10px 16px;border:1px solid var(--cb-control);text-decoration:none}.review-page ol{padding-left:24px}.review-page li{margin:12px 0}
@media(max-width:1023px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding-left:24px;padding-right:24px}}
@media(max-width:767px){h1,.page-top h1,.onboard-head h1{font-size:26px}.integration-nav{gap:4px 14px;padding:8px 16px}.integration-nav strong,.integration-nav span{width:100%}.integration-nav a{font-size:13px}.masthead{padding:20px 16px}.shell{padding:20px 16px 48px;margin:0}.footer{padding:24px 16px 112px;margin:0}.panel,.list-card{padding:20px 16px}.hero h1{font-size:34px;letter-spacing:0;line-height:1.25}.hero .intro{font-size:16px}.hero .invite-note{font-size:14px;text-align:left}.hero .actions .text-button{font-size:14px}.page-top p,.onboard-head p{font-size:16px}.nav{max-width:none;margin:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));background:white}.nav a{font-size:12px;padding:8px 4px}.nav a span{font-size:11px}.shell.has-nav{padding-bottom:48px}.steps{gap:8px}.step{font-size:12px}.detail-grid,.grid,.fields,.board,.review-grid{grid-template-columns:1fr}.onboard>.panel{padding:20px 16px}.header-meta{font-size:10px}.actions{gap:8px}.actions>*{max-width:100%}main{padding-left:16px;padding-right:16px}.stats{grid-template-columns:1fr}.contact-row{grid-template-columns:1fr}.review-page{padding:0 16px}.form-foot .primary{min-width:120px}.panel .actions{display:flex}.panel .actions>*{flex-grow:1}.card-foot{flex-wrap:wrap}.spread{flex-wrap:wrap}.integration-nav+header{flex-wrap:wrap}.notice{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Wrapped card titles keep a continuous pointer target between text lines. */
.card h3>a{display:inline-block;min-height:44px}

.shared-state-notice{padding:16px max(16px,calc((100vw - 1280px)/2));background:#F5F1E6;color:#1A1A18;border-bottom:2px solid #75756F;overflow-wrap:anywhere}
#storage-notice:not(:empty),.shared-state-notice{position:sticky;top:0;z-index:60;font-size:14px;line-height:1.5;max-height:32vh;overflow:auto;background:var(--cb-notice);border-bottom:2px solid var(--cb-control)}
#storage-notice button,#storage-notice a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;margin:4px 8px 0 0}
.meta-grid>*{min-width:0}
@media(max-width:360px){.meta-grid{grid-template-columns:1fr}.meta-grid label:first-child{grid-column:auto}}
/* Preserve the dense catalog while keeping Thai descriptions readable. */
.item-bottom,.item-bottom span,.notice p,.client-notice p{font-size:14px;line-height:1.5}
.demo-note{font-size:12px}
nav[aria-label="เมนูหลัก"]{flex-wrap:wrap}

/* Split Ledger: scoped presentation, using the selected CITYBOY design system. */
:root{--cb-bg:#F5F5F3;--cb-surface:#FFFFFF;--cb-ink:#202020;--cb-muted:#595955;--cb-line:#D4D4D0;--cb-control:#767670;--cb-selected:#F1F1ED;--cb-accent:#FF5A1F;--cb-accent-text:#B83D16;--cb-danger:#9D2424;--cb-radius:4px;--ink:var(--cb-ink);--paper:var(--cb-bg);--muted:var(--cb-muted);--line:var(--cb-line)}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Thonburi","Noto Sans Thai",sans-serif;font-size:16px;line-height:1.6;color:var(--cb-ink);background:var(--cb-bg);font-synthesis:none}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
button,.button,input,select,textarea{font:inherit}
button,.button{min-height:44px;border-radius:var(--cb-radius);font-weight:650;line-height:1.4;transition:background-color .15s,border-color .15s}
button.primary,.button.primary{background:var(--cb-ink);border-color:var(--cb-ink);color:#fff}
button.primary:hover,.button.primary:hover{background:#3A3A37;border-color:#3A3A37}
button:disabled,.button[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
a{color:inherit;text-underline-offset:.2em}
a:hover{color:var(--cb-accent-text)}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--cb-ink);outline-offset:3px;box-shadow:0 0 0 2px white}
input,select,textarea{accent-color:var(--cb-ink);border-radius:var(--cb-radius);border-color:var(--cb-control);min-width:0;max-width:100%;color:var(--cb-ink);background:var(--cb-surface)}
input::placeholder,textarea::placeholder{color:var(--cb-muted);opacity:1}
:where(input,select,textarea)[aria-invalid="true"]{border-color:var(--cb-danger)}
.error,.field-error{color:var(--cb-danger)}
h1,h2,h3{letter-spacing:0;overflow-wrap:anywhere}
h1{font-size:32px;line-height:1.35;font-weight:800}
h2{font-size:22px;line-height:1.45;font-weight:750}
h3{font-size:18px;line-height:1.5;font-weight:700}
p,dd,.text-content{overflow-wrap:anywhere}
small,.small,.muted,.subtle{line-height:1.55}
.integration-nav{padding:8px max(16px,calc((100vw - 1280px)/2));gap:4px 16px;background:#F0F0EC;font-size:12px;border-bottom:1px solid var(--cb-line);color:var(--cb-muted)}
.integration-nav strong{font-size:13px}
.integration-nav a{font-size:12px;min-height:32px}
.integration-nav button{font-size:12px;min-height:32px;padding:5px 10px}
.integration-nav span{font-size:12px}
/* Client pages preserve existing signup/request/proposal controls and data. */
.cb-client #app{min-height:100vh}
.cb-client .demo-strip{background:var(--cb-bg);border-bottom:1px solid var(--cb-line);font-size:12px;line-height:1.5;letter-spacing:0;padding:8px 16px;gap:4px 16px}
.cb-client .demo-strip a{font-size:12px;white-space:normal}
.cb-client .masthead{max-width:744px;padding:0 24px 0 0;min-height:88px;border:1px solid var(--cb-line);border-top:0;background:#E95326 url("assets/orange-paper.png") center 62%/cover;color:#202020;align-items:center}
.cb-client .brand{align-self:stretch;display:flex;align-items:center;gap:16px;min-width:0;min-height:88px;text-decoration:none;background:#202020;color:white;padding:12px 16px}
.cb-client .brand:hover{color:white;background:#2F2F2C}
.cb-client .client-brand-image{display:block;object-fit:contain;width:80px;height:60px;flex:none}
.cb-client .brand-caption{font-size:11px;line-height:1.5;letter-spacing:.05em;max-width:90px}
.cb-client .header-meta{color:#202020;font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.6;padding:8px;overflow-wrap:anywhere}
.cb-client .shell{max-width:744px;padding:32px;margin:auto;min-height:50vh;background:#fff;border-inline:1px solid var(--cb-line)}
.cb-client .footer{max-width:744px;padding:24px 32px 40px;background:#fff;border:1px solid var(--cb-line);border-top:0;gap:16px;font-size:14px;align-items:flex-start}
.cb-client .footer a,.cb-client .footer button{font-size:14px;min-height:44px}
.cb-client .hero{display:block;min-height:0;padding:0 0 32px;margin:0}
.cb-client .hero-copy .eyebrow{font-size:11px;color:var(--cb-muted);letter-spacing:.04em;margin:0 0 16px;font-weight:600}
.cb-client .hero h1{font-size:36px;line-height:1.3;letter-spacing:0;max-width:560px}
.cb-client .hero .intro{font-size:16px;line-height:1.7;margin:20px 0 24px;max-width:560px}
.cb-client .hero .actions{display:flex;align-items:flex-start;flex-direction:column;gap:8px;margin:0 0 20px}
.cb-client .hero .actions .button{min-width:240px;justify-content:center}
.cb-client .hero .invite-note{font-size:14px;line-height:1.6;text-align:left;max-width:560px}
.cb-client .welcome-services .section-title{border-color:var(--cb-line);padding:24px 0 16px}
.cb-client .service-teasers{display:grid;grid-template-columns:1fr;gap:0}
.cb-client .teaser{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:20px 0;border-top:1px solid var(--cb-line)}
.cb-client .teaser>span{color:var(--cb-accent-text);font-size:14px;font-weight:700;padding:0;grid-row:auto}
.cb-client .teaser h3{font-size:18px;margin:0 0 6px}
.cb-client .teaser p{font-size:16px;line-height:1.6;grid-column:auto}
.cb-client .welcome-tail{margin-top:16px;padding:24px 0 0;align-items:flex-start;gap:20px}
.cb-client .page-top,.cb-client .onboard-head{margin:0 0 24px;align-items:flex-start}
.cb-client .page-top .eyebrow,.cb-client .onboard-head .eyebrow{margin-bottom:8px;font-size:11px;color:var(--cb-muted);letter-spacing:.05em}
.cb-client .page-top h1,.cb-client .onboard-head h1{font-size:30px;border:0;padding:0;width:auto;line-height:1.4}
.cb-client .page-top p,.cb-client .onboard-head p{font-size:16px;margin-top:10px;line-height:1.6}
.cb-client .panel,.cb-client .list-card{padding:24px;background:#fff;border:1px solid var(--cb-line);border-radius:var(--cb-radius);box-shadow:none}
.cb-client .onboard{margin:0;max-width:none}
.cb-client .onboard>.panel{padding:24px 0;border:0;border-top:1px solid var(--cb-line);border-radius:0}
.cb-client .onboard>.text-button{margin-bottom:16px}
.cb-client .steps{margin:0 0 28px;gap:12px}
.cb-client .step{font-size:12px;border-top:3px solid var(--cb-line);line-height:1.5;padding-top:8px;overflow-wrap:anywhere}
.cb-client .step.active{border-color:var(--cb-accent);color:var(--cb-ink)}
.cb-client .step.done{border-color:var(--cb-ink)}
.cb-client form{gap:22px}
.cb-client .field{gap:8px}
.cb-client .field label,.cb-client legend{font-size:16px;font-weight:650;line-height:1.55}
.cb-client .field input,.cb-client .field select,.cb-client .field textarea{border:1px solid var(--cb-control);padding:11px 12px;min-height:48px;border-radius:var(--cb-radius);font-size:16px;line-height:1.6;background:#fff}
.cb-client .field textarea{min-height:120px;resize:vertical}
.cb-client .field small{font-size:14px;line-height:1.55;color:var(--cb-muted)}
.cb-client .field-error{font-size:14px;line-height:1.6}
.cb-client .field-error:empty{display:none}
.cb-client .form-foot{padding-top:24px;gap:12px;align-items:center;border-top:1px solid var(--cb-line);flex-wrap:wrap}
.cb-client .form-foot .saved{flex-basis:100%;order:3;font-size:13px;line-height:1.55}
.cb-client .form-foot .primary{margin-left:auto;min-width:136px}
.cb-client .check{font-size:16px;line-height:1.65}
.cb-client .choice{padding:16px;border-color:var(--cb-control);border-radius:4px}
.cb-client .choice strong{font-size:16px}
.cb-client .choice small{font-size:14px}
.cb-client .callout,.cb-client .hint{border:1px solid var(--cb-line);border-left:3px solid var(--cb-control);padding:14px 16px;background:#F5F5F1;color:var(--cb-ink);font-size:14px;line-height:1.6}
.cb-client .success-callout{border-left-color:#256342;background:#F0F6F0}
.cb-client .tag{font-size:13px;padding:3px 8px;line-height:1.6;border-radius:4px;letter-spacing:0}
.cb-client .tag.orange-tag{color:#80351C;background:#FAEEE6;border-color:#E8C9B8}
.cb-client .amount{font-size:28px;line-height:1.4;letter-spacing:0;margin:12px 0;font-variant-numeric:tabular-nums}
.cb-client .stack{gap:20px}
.cb-client .nav{max-width:744px;background:#fff;gap:4px;padding:8px 16px;border-inline:1px solid var(--cb-line)}
.cb-client .nav a{font-size:14px;min-height:44px;border-radius:0;line-height:1.5;padding:10px 12px;border-bottom:3px solid transparent;flex:1;text-align:center;overflow-wrap:anywhere}
.cb-client .nav a.active{background:#fff;color:var(--cb-ink);border-bottom-color:var(--cb-accent)}
.cb-client .nav a:hover{background:var(--cb-selected)}
.cb-client .empty{border:1px solid var(--cb-line);background:#F8F8F5;padding:32px 24px}
.cb-client .version-tabs a{min-height:44px;font-size:14px}
.cb-client .version-tabs a.selected{background:var(--cb-ink);color:#fff}
.cb-client .two-col,.cb-client .two-equal,.cb-client .three-col{grid-template-columns:1fr;gap:24px}
.cb-client .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cb-client .text-content{line-height:1.7}
.cb-client .error,.cb-client .field-error{color:var(--cb-danger)}
.cb-client dialog{border-radius:4px;max-width:520px;background:#fff;max-height:calc(100dvh - 32px);overflow:auto}
.cb-client .toast{font-size:14px;border-radius:4px;line-height:1.6;max-width:calc(100vw - 32px)}
@media(max-width:767px){
 .cb-client .masthead{padding:0 12px 0 0;min-height:76px;margin:0;border-inline:0}
 .cb-client .brand{min-height:76px;padding:10px 12px;gap:10px}
 .cb-client .client-brand-image{width:72px;height:54px}
 .cb-client .brand-caption{display:none}
 .cb-client .header-meta{font-size:10px;max-width:160px;padding:6px}
 .cb-client .shell{padding:24px 16px 32px;border:0}
 .cb-client .footer{padding:24px 16px 112px;border-inline:0;flex-wrap:wrap}
 .cb-client .hero h1{font-size:28px;line-height:1.4}
 .cb-client .hero .intro{margin:16px 0 24px;font-size:16px}
 .cb-client .hero .actions{display:flex;align-items:stretch}
 .cb-client .hero .actions .button{width:100%;min-width:0}
 .cb-client .hero .actions .text-button{align-self:flex-start;font-size:14px;justify-self:auto}
 .cb-client .welcome-tail{display:flex;flex-direction:column}
 .cb-client .welcome-tail .button{width:100%}
 .cb-client .page-top h1,.cb-client .onboard-head h1{font-size:26px}
 .cb-client .panel,.cb-client .list-card{padding:20px 16px}
 .cb-client .onboard>.panel{padding:24px 0}
 .cb-client .steps{gap:8px;margin-bottom:24px}
 .cb-client .step{font-size:11px;line-height:1.5}
 .cb-client .detail-grid{grid-template-columns:1fr;gap:20px}
 .cb-client .nav{margin:0;max-width:none;border-inline:0;padding:6px 8px max(6px,env(safe-area-inset-bottom));gap:2px}
 .cb-client .nav a{font-size:12px;padding:8px 4px;min-width:0}
 .cb-client .nav a span{font-size:11px}
 .cb-client .shell.has-nav{padding-bottom:92px}
 .cb-client .actions{gap:10px}
 .cb-client .actions>*{max-width:100%}
 .cb-client .form-foot .primary{flex:1;margin-left:0;min-width:100px}
 .cb-client .form-foot .saved{font-size:13px}
 .cb-client .demo-strip{justify-content:flex-start;font-size:11px;gap:4px 12px;padding:8px 12px}
 .cb-client .demo-strip a{font-size:11px}
 .cb-client .toast{bottom:90px}
}
@media(max-width:360px){.cb-client .form-foot{gap:8px}.cb-client .form-foot button{padding-inline:12px}.cb-client .header-meta{max-width:130px}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none!important}}

/* Keep existing server/session utilities reachable without dominating the task header. */
.integration-nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;align-items:center}
.integration-nav>*{flex-shrink:0;white-space:nowrap}
.integration-nav a,.integration-nav button{min-height:44px}
@media(max-width:767px){.integration-nav{padding:4px 12px;gap:12px}.integration-nav strong,.integration-nav span{width:auto}.integration-nav strong{font-size:12px}}

.cb-client .brief-progress{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0 0 24px;font-size:13px;color:var(--cb-muted)}
.cb-client .brief-progress li{border-top:3px solid var(--cb-line);padding-top:8px}
.cb-client .brief-progress li.current{border-color:var(--cb-accent);color:var(--cb-ink);font-weight:700}
.cb-client .brief-progress li.done{border-color:var(--cb-ink)}
.cb-client .brief-progress span{font-variant-numeric:tabular-nums;margin-right:4px}