* { box-sizing: border-box; }

html { background: var(--phasan-ivory); color: var(--phasan-ink); font-family: var(--font-sans); }
body { margin: 0; min-width: 20rem; min-height: 100vh; background: var(--phasan-ivory); }
button, select { font: inherit; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--phasan-bronze); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--phasan-white); color: var(--phasan-espresso); border: 1px solid var(--phasan-bronze); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.shell { min-height: 100vh; display: grid; grid-template-columns: 18.25rem minmax(0, 1fr); transition: grid-template-columns 180ms ease; }
.shell.is-collapsed { grid-template-columns: 5.6rem minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 1.7rem 1.05rem 1.15rem; display: flex; flex-direction: column; color: var(--phasan-cocoa); background: var(--phasan-ivory); border-right: 1px solid var(--phasan-sandstone); overflow-y: auto; }
.brand-lockup { display: flex; align-items: center; gap: 0.65rem; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { color: var(--phasan-espresso); font-size: 1.42rem; font-weight: 600; letter-spacing: 0.14em; white-space: nowrap; }
.brand-lockup em { display: block; margin-top: 0.22rem; color: var(--phasan-cocoa); font-size: 0.75rem; font-style: normal; font-weight: 500; letter-spacing: 0.28em; }
.brand-lockup small { margin-top: 0.38rem; color: var(--phasan-taupe); font-size: 0.58rem; letter-spacing: 0.11em; }
.brand-mark { display: block; width: 3rem; height: 3rem; border-radius: 0.65rem; flex: 0 0 auto; }

.environment-note { margin: 1.7rem 0 1.25rem; padding: 0.7rem 0.75rem; display: flex; gap: 0.7rem; align-items: center; border-top: 1px solid var(--phasan-sandstone); border-bottom: 1px solid var(--phasan-sandstone); }
.workspace-badge { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--phasan-cocoa); border: 2px solid var(--phasan-sandstone); border-radius: 0.55rem; font-size: 1.4rem; line-height: 1; }
.environment-note strong, .environment-note small { display: block; }
.environment-note strong { color: var(--phasan-espresso); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; }
.environment-note small { margin-top: 0.2rem; color: var(--phasan-taupe); font-size: 0.66rem; line-height: 1.35; }

.nav-group { margin-top: 1.15rem; }
.nav-group:first-child { margin-top: 0; }
.nav-group h2 { margin: 0 0 0.45rem 0.75rem; color: var(--phasan-taupe); font: 600 0.62rem/1 var(--font-mono); letter-spacing: 0.15em; text-transform: uppercase; }
.nav-group ul { margin: 0; padding: 0; list-style: none; }
.nav-link { min-height: 2.75rem; padding: 0.66rem 0.72rem; display: flex; align-items: center; gap: 0.8rem; color: var(--phasan-cocoa); text-decoration: none; border: 1px solid transparent; border-radius: 0.58rem; font-size: 0.88rem; }
.nav-link:hover { color: var(--phasan-espresso); background: var(--phasan-sand); }
.nav-link[aria-current="page"] { color: var(--phasan-white); background: var(--phasan-cocoa); border-color: var(--phasan-cocoa); box-shadow: 0 5px 12px rgb(107 78 61 / 0.18); }
.nav-icon { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; color: currentColor; }
.nav-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.collapse-sidebar { min-height: 2.55rem; margin-top: 1.25rem; padding: 0.55rem 0.72rem; display: flex; align-items: center; gap: 0.75rem; color: var(--phasan-taupe); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.75rem; text-align: left; }
.collapse-sidebar:hover { color: var(--phasan-cocoa); background: var(--phasan-sand); }
.collapse-icon { width: 1.45rem; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 1.25rem 0.75rem 0; border-top: 1px solid var(--phasan-sandstone); }
.sidebar-account { display: flex; align-items: center; gap: 0.7rem; color: var(--phasan-espresso); text-decoration: none; }
.sidebar-account strong, .sidebar-account small { display: block; }
.sidebar-account strong { font-size: 0.78rem; }
.sidebar-account small { margin-top: 0.15rem; color: var(--phasan-taupe); font-size: 0.64rem; }
.sidebar-avatar { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--phasan-ivory); background: var(--phasan-cocoa); border: 2px solid var(--phasan-sandstone); border-radius: 50%; font-size: 1.05rem; }
.sidebar-footer p { margin: 0 0 0.45rem; color: var(--phasan-taupe); font-size: 0.66rem; }
.sidebar-footer > p, .sidebar-footer > a[href="#/settings"] { display: block; }
.sidebar-footer > p { margin-top: 1rem; }
.sidebar-footer > a[href="#/settings"] { color: var(--phasan-cocoa); font-size: 0.73rem; text-decoration: none; }
.sidebar-footer > a[href="#/settings"]:hover { color: var(--phasan-espresso); }

.shell.is-collapsed .brand-lockup { justify-content: center; }
.shell.is-collapsed .brand-lockup > span,
.shell.is-collapsed .environment-note > div,
.shell.is-collapsed .nav-group h2,
.shell.is-collapsed .nav-label,
.shell.is-collapsed .collapse-label,
.shell.is-collapsed .sidebar-account > span:not(.sidebar-avatar),
.shell.is-collapsed .sidebar-footer > p,
.shell.is-collapsed .sidebar-footer > a[href="#/settings"] { display: none; }
.shell.is-collapsed .environment-note { justify-content: center; padding-inline: 0; border-top: 0; border-bottom: 0; }
.shell.is-collapsed .nav-link { justify-content: center; padding-inline: 0; }
.shell.is-collapsed .collapse-sidebar { justify-content: center; padding-inline: 0; }
.shell.is-collapsed .sidebar-account { justify-content: center; }

.workspace { min-width: 0; }
.topbar { height: 4.8rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgb(250 248 243 / 0.96); border-bottom: 1px solid var(--phasan-sandstone); }
.workspace-context { display: grid; grid-template-columns: auto; }
.language-control { display: grid; gap: 0.15rem; margin-left: auto; }
.language-control label { font-size: 0.65rem; color: var(--phasan-cocoa); }
.language-control select { min-height: 2.75rem; padding: 0.35rem 0.5rem; border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); color: var(--phasan-espresso); background: var(--phasan-ivory); font-size: 0.8rem; }
html[lang="th"] .page-heading h1 { line-height: 1.3; letter-spacing: -0.025em; }
html[lang="th"] .nav-group h2,
html[lang="th"] .eyebrow,
html[lang="th"] .contract-stamp span,
html[lang="th"] .status-pill,
html[lang="th"] .evidence-line,
html[lang="th"] .ownership-row dt { font-family: var(--font-sans); line-height: 1.6; letter-spacing: 0; }
.eyebrow { color: var(--phasan-taupe); font: 500 0.61rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.workspace-context select { margin: 0.2rem 0 0 -0.25rem; padding: 0.2rem 1.7rem 0.2rem 0.25rem; max-width: 20rem; color: var(--phasan-espresso); background: transparent; border: 0; font-weight: 600; }
.account-link { display: flex; align-items: center; gap: 0.7rem; color: var(--phasan-espresso); text-decoration: none; }
.account-link strong, .account-link small { display: block; text-align: right; }
.account-link strong { font-size: 0.78rem; }
.account-link small { color: var(--phasan-taupe); font-size: 0.64rem; }
.avatar { width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--phasan-ivory); background: var(--phasan-cocoa); border-radius: 50%; font: 600 0.65rem/1 var(--font-mono); }
.menu-toggle { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); background: transparent; color: var(--phasan-espresso); }
.menu-toggle > span:first-child, .menu-toggle > span:first-child::before, .menu-toggle > span:first-child::after { display: block; width: 1.15rem; height: 1px; background: currentColor; content: ""; }
.menu-toggle > span:first-child::before { transform: translateY(-0.36rem); }
.menu-toggle > span:first-child::after { transform: translateY(0.3rem); }
.nav-close { display: none; }

main { min-height: calc(100vh - 4.8rem); }
#route-content { max-width: 92rem; margin: 0 auto; padding: clamp(1.5rem, 3vw, 3.4rem); }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--phasan-sandstone); }
.page-heading h1 { margin: 0.35rem 0 0; max-width: 18ch; color: var(--phasan-espresso); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 450; line-height: 0.98; letter-spacing: -0.045em; }
.page-heading p { margin: 0.85rem 0 0; max-width: 44rem; color: var(--phasan-cocoa); font-size: 0.93rem; line-height: 1.6; }
.section-kicker { color: var(--phasan-cocoa); font: 600 0.72rem/1.5 var(--font-sans); letter-spacing: 0.04em; }
.contract-stamp { min-width: 11rem; padding: 0.85rem 1rem; background: var(--phasan-sand); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); }
.contract-stamp span, .contract-stamp strong { display: block; }
.contract-stamp span { color: var(--phasan-taupe); font: 500 0.6rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.contract-stamp strong { margin-top: 0.35rem; color: var(--phasan-espresso); font-size: 0.78rem; }

.section { margin-top: 2.2rem; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title h2 { margin: 0; color: var(--phasan-espresso); font-size: 1.05rem; font-weight: 620; }
.section-title p { margin: 0; color: var(--phasan-taupe); font-size: 0.72rem; }
.readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-md); background: var(--phasan-white); box-shadow: var(--shadow-low); overflow: hidden; }
.readiness-card { min-height: 11rem; padding: 1.25rem; border-right: 1px solid var(--phasan-sandstone); }
.readiness-card:last-child { border-right: 0; }
.owner-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.owner-line strong { color: var(--phasan-espresso); font-size: 0.88rem; }
.status-pill { padding: 0.3rem 0.52rem; color: var(--phasan-warning); background: var(--phasan-sand); border: 1px solid var(--phasan-sandstone); border-radius: 999px; font: 550 0.58rem/1 var(--font-mono); text-transform: uppercase; }
.readiness-card p { margin: 1.25rem 0 0; color: var(--phasan-cocoa); font-size: 0.8rem; line-height: 1.55; }
.evidence-line { margin-top: 1rem; display: flex; align-items: center; gap: 0.4rem; color: var(--phasan-taupe); font: 500 0.61rem/1.4 var(--font-mono); }
.evidence-line::before { width: 0.42rem; height: 0.42rem; background: var(--phasan-bronze); border-radius: 50%; content: ""; }

.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.module-card { min-height: 9.5rem; padding: 1rem; display: flex; flex-direction: column; text-decoration: none; background: var(--phasan-white); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); box-shadow: 0 1px 1px rgb(46 31 20 / 0.03); }
.module-card:hover { border-color: var(--phasan-bronze); box-shadow: var(--shadow-low); transform: translateY(-1px); }
.module-card small { color: var(--phasan-taupe); font: 500 0.59rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.module-card strong { margin-top: 0.65rem; color: var(--phasan-espresso); font-size: 0.92rem; }
.module-card span { margin-top: auto; color: var(--phasan-bronze); font-size: 0.72rem; }

/* Core-backed launcher states use the existing PHASAN Work token layer. */
.live-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.live-product { display: flex; min-height: 13rem; flex-direction: column; gap: 1rem; padding: 1.45rem; background: var(--phasan-white); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); }
.live-product-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.live-product h3 { margin: 0; color: var(--phasan-espresso); font-size: 1.35rem; }
.live-product p { margin: 0; color: var(--phasan-cocoa); font-size: 0.82rem; line-height: 1.6; }
.live-launch, .live-button { display: inline-flex; min-height: 2.75rem; width: fit-content; align-items: center; justify-content: center; padding: 0.65rem 1rem; border: 1px solid var(--phasan-espresso); border-radius: var(--radius-sm); background: var(--phasan-espresso); color: var(--phasan-white); font-size: 0.78rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.live-launch { margin-top: auto; }
.live-launch:hover, .live-button:hover { background: var(--phasan-cocoa); }
.live-button:disabled { opacity: 0.55; cursor: wait; }
.live-unavailable { margin-top: auto; color: var(--phasan-cocoa); font-size: 0.76rem; }
.live-status-available { color: var(--phasan-espresso); background: var(--phasan-sand); }
.live-status-not_entitled, .live-status-mapping_required, .live-status-unavailable { color: var(--phasan-cocoa); background: var(--phasan-ivory); }
.live-nav-symbol { width: 1.65rem; flex: 0 0 auto; color: var(--phasan-bronze); font: 600 0.95rem/1 var(--font-sans); text-align: center; }
.live-logout { width: 100%; margin-top: 0.8rem; border-color: var(--phasan-sandstone); background: transparent; color: var(--phasan-espresso); }
.live-logout[hidden] { display: none; }
.live-logout:hover { background: var(--phasan-sand); }
.live-create-form { display: grid; max-width: 25rem; gap: 0.75rem; margin-top: 1rem; }
.live-create-form label { display: grid; gap: 0.35rem; color: var(--phasan-espresso); font-size: 0.78rem; }
.live-create-form input { min-height: 2.75rem; padding: 0.5rem 0.7rem; border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); background: var(--phasan-white); color: var(--phasan-espresso); }
.live-error { padding: 0.75rem 1rem; border-left: 3px solid var(--phasan-bronze); background: var(--phasan-sand); color: var(--phasan-espresso); font-size: 0.8rem; }

.empty-panel { padding: 2.1rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; background: var(--phasan-sand); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-md); }
.empty-symbol { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; color: var(--phasan-bronze); border: 1px solid var(--phasan-bronze); border-radius: 50%; font-family: var(--font-mono); }
.empty-panel h2 { margin: 0; color: var(--phasan-espresso); font-size: 1rem; }
.empty-panel p { margin: 0.4rem 0 0; max-width: 46rem; color: var(--phasan-cocoa); font-size: 0.82rem; line-height: 1.55; }

.module-view { max-width: 70rem; }
.ownership-table { margin-top: 1.5rem; background: var(--phasan-white); border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-md); overflow: hidden; }
.ownership-row { padding: 1rem 1.15rem; display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; border-top: 1px solid var(--phasan-sand); }
.ownership-row:first-child { border-top: 0; }
.ownership-row dt { color: var(--phasan-taupe); font: 500 0.64rem/1.4 var(--font-mono); text-transform: uppercase; }
.ownership-row dd { margin: 0; color: var(--phasan-espresso); font-size: 0.8rem; overflow-wrap: anywhere; }
.back-link { display: inline-flex; margin-top: 1.4rem; color: var(--phasan-cocoa); font-size: 0.8rem; text-underline-offset: 0.2em; }

.nav-scrim { position: fixed; z-index: 29; inset: 0; background: rgb(32 21 12 / 0.45); }
.noscript { margin: 1rem; padding: 1rem; border: 1px solid var(--phasan-bronze); }

/* CI Taupe and Bronze stay as accents; Cocoa keeps small light-surface text readable. */
.eyebrow, .account-link small, .contract-stamp span, .section-title p,
.evidence-line, .module-card small, .module-card span, .ownership-row dt {
  color: var(--phasan-cocoa);
}

@media (max-width: 70rem) {
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 56rem) {
  .live-product-grid { grid-template-columns: 1fr; }
  .shell, .shell.is-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; left: 0; width: min(19rem, calc(100vw - 3rem)); visibility: hidden; pointer-events: none; transform: translateX(-105%); transition: transform 180ms ease, visibility 0s linear 180ms; box-shadow: 14px 0 40px rgb(32 21 12 / 0.18); }
  .sidebar.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .shell.is-collapsed .brand-lockup > span,
  .shell.is-collapsed .environment-note > div,
  .shell.is-collapsed .nav-group h2,
  .shell.is-collapsed .nav-label,
  .shell.is-collapsed .sidebar-account > span:not(.sidebar-avatar),
  .shell.is-collapsed .sidebar-footer > p,
  .shell.is-collapsed .sidebar-footer > a[href="#/settings"],
  .shell.is-collapsed .sidebar-footer { display: block; }
  .shell.is-collapsed .brand-lockup { justify-content: flex-start; }
  .shell.is-collapsed .environment-note { justify-content: flex-start; padding-inline: 0.75rem; border-top: 1px solid var(--phasan-sandstone); border-bottom: 1px solid var(--phasan-sandstone); }
  .shell.is-collapsed .nav-link { justify-content: flex-start; padding-inline: 0.72rem; }
  .shell.is-collapsed .collapse-sidebar { justify-content: flex-start; padding-inline: 0.72rem; }
  .shell.is-collapsed .collapse-label { display: block; }
  .collapse-sidebar { display: none; }
  .nav-close { display: block; align-self: flex-end; width: 2.75rem; height: 2.75rem; margin: -1rem -0.5rem 0.25rem 0; color: var(--phasan-cocoa); background: transparent; border: 1px solid var(--phasan-sandstone); border-radius: var(--radius-sm); font-size: 1.5rem; cursor: pointer; }
  .menu-toggle { display: inline-flex; }
  .topbar { position: sticky; z-index: 20; top: 0; height: 4.25rem; padding: 0 1.15rem; }
  main { min-height: calc(100vh - 4.25rem); }
  .workspace-context { margin-right: auto; }
  .account-link > span:not(.avatar) { display: none; }
  .readiness-grid { grid-template-columns: 1fr; }
  .readiness-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--phasan-sandstone); }
  .readiness-card:last-child { border-bottom: 0; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 38rem) {
  #route-content { padding: 1.35rem 1rem 2.5rem; }
  .page-heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .page-heading h1 { max-width: none; font-size: clamp(2rem, 12vw, 3.1rem); }
  .contract-stamp { min-width: 0; }
  .section-title { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 7.5rem; }
  .empty-panel { grid-template-columns: 1fr; padding: 1.35rem; }
  .ownership-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .workspace-context select { max-width: 12.5rem; font-size: 0.76rem; }
  .topbar { gap: 0.6rem; padding-inline: 0.75rem; }
  .workspace-context { min-width: 0; }
  .workspace-context select { width: 100%; max-width: 11rem; }
  .account-link { display: none; }
  .language-control { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}