/* The approved Visual palette, shared by the authenticated app and login. */
:root {
  --bg:#f6f4ee; --paper:#f6f4ee; --surface:#fffdf9; --ink:#171613;
  --muted:#6f6b62; --line:#dedbd3; --accent:#6b513a; --accent-light:#eee5d9;
  --green:#4d6b5a; --green-soft:#e2ece5; --amber:#7b6031; --amber-soft:#eee5cf;
  --radius:16px; color-scheme:light;
}
body { background:var(--bg); }
::selection, .catalogue ::selection { background:#e3d4bf; color:var(--ink); }
input, textarea { caret-color:var(--accent); }
html { scrollbar-color:#bdb6aa var(--bg); }
button, a { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible,
.catalogue :focus-visible, .session-maintenance summary:focus-visible, .session-table-wrap:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px;
}
.search:focus-within { outline:2px solid var(--accent); outline-offset:4px; }
.shell { display:block; min-height:100dvh; }
.shell > .main { margin:0; min-width:0; }
.brand-mark, .login-logo { fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; }
.brand-mark { width:38px; height:38px; }
.account-name { max-width:150px; overflow-wrap:anywhere; }
.workspace-heading { min-width:0; overflow-wrap:anywhere; }
.workspace-label:empty { display:none; }
.release-info { font-size:12px; }
.release-panel { background:var(--surface); z-index:30; }
.content { max-width:1248px; padding:38px 32px 44px; }
.page-heading { margin-bottom:26px; }
.page-heading h1 { font-size:30px; font-weight:550; letter-spacing:-.02em; }
.button {
  min-height:42px; padding:10px 17px; border-radius:10px; font-size:14px;
  color:var(--ink); background:var(--surface); border-color:var(--line);
  transition:background .15s, border-color .15s;
}
.button.primary { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.button:hover { filter:none; background:#eeeae2; border-color:#bdb6aa; }
.button.primary:hover { background:#39362f; border-color:#39362f; }
.button.quiet { color:var(--accent); }
.button.small { min-height:36px; font-size:13px; }
.button[aria-disabled=true] { opacity:.48; cursor:default; }
.icon-button { background:#eeeae2; min-width:38px; min-height:38px; }
.panel, .editor, .editor-tabs, .confirmation-dialog, .cat-products,
.cat-cards .cat-product, .cat-template-dialog, .cat-template-list { background:var(--surface); }
.table th, .editor-aside { background:#f2efe8; }
.pill { border-radius:7px; padding:5px 9px; font-size:12px; }
.pill.amber, .cat-issues { background:var(--amber-soft); color:var(--amber); border-color:var(--line); }
.pill.green { background:var(--green-soft); color:var(--green); }
.pill.gray { background:#ece9e1; color:#625d52; }
.pill.blue, .tab.active { background:var(--accent-light); color:var(--accent); }
.banner { background:var(--accent-light); color:var(--accent); border-color:var(--line); }
.banner strong { color:var(--accent); }
.field input, .field textarea, .field select, .catalogue input:not([type=checkbox]),
.catalogue select, .catalogue textarea, .session-maintenance input[type=search], .session-maintenance select {
  background:var(--surface); border-color:var(--line); border-radius:9px; color:var(--ink);
}
.catalogue input::placeholder, input::placeholder, textarea::placeholder { color:var(--muted); }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); }
.cat-actions { gap:10px; margin-bottom:24px; }
.cat-filters { gap:14px; margin-bottom:18px; align-items:center; }
.cat-filters .search { max-width:460px; }
.cat-filters .field.compact { flex-direction:row; align-items:center; gap:10px; }
.cat-filters .compact select { width:auto; }
.cat-view { padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.cat-view .button { min-height:34px; border:0; padding:6px 12px; border-radius:6px; background:transparent; color:var(--muted); }
.cat-view .button[aria-pressed=true] { background:#eeeae2; color:var(--ink); }
.cat-selection { min-height:42px; gap:14px; font-size:13px; }
.cat-selection .button { background:transparent; border-color:transparent; padding:8px 0; text-decoration:underline; text-underline-offset:4px; }
.cat-pagination { font-size:13px; font-variant-numeric:tabular-nums; margin:18px 0; }
.cat-pagination select { min-height:40px; }
.cat-products { border-radius:16px; }
.cat-product { min-height:112px; padding:16px 22px; gap:18px; }
.cat-product:hover { background:#f9f6f0; }
.cat-thumb, .cat-thumb img { width:68px; height:78px; border-radius:9px; }
.cat-product-copy p { margin:7px 0; }
.cat-code { font-size:14px; font-weight:600; }
.cat-product-copy small { font-size:12px; line-height:1.7; }
.cat-product-state .button { background:transparent; border:0; padding-right:0; }
.cat-cards { grid-template-columns:repeat(3,minmax(0,1fr)); background:transparent; }
.cat-cards .cat-product { border-radius:16px; padding:20px; }
.cat-cards .cat-thumb, .cat-cards .cat-thumb img { width:100%; height:180px; }
.cat-template-dialog::backdrop { background:rgba(36,30,22,.32); }
.login-stage {
  min-height:100dvh; padding:44px 24px; display:grid; place-items:center;
  background:radial-gradient(circle at 18% 12%,#efe0d7 0,transparent 38%),linear-gradient(135deg,#f6f4ee,#e9e4da);
}
.login-stage .login-access {
  width:min(430px,100%); max-width:430px; margin:0; padding:40px 42px 30px;
  border:1px solid var(--line); border-radius:22px; background:var(--surface);
  box-shadow:0 30px 90px rgba(42,37,28,.13); text-align:center;
}
.login-logo { width:132px; height:132px; display:block; margin:0 auto 20px; }
.login-access h1 { font:500 38px/1.15 Georgia,"Times New Roman",serif; margin:0 0 10px; }
.login-access .login-subtitle { letter-spacing:.12em; margin:0 0 20px; }
.login-access p { color:var(--muted); font-size:13px; line-height:1.7; }
.login-access form { margin-top:24px; text-align:left; }
.login-access .field { margin:0 0 18px; gap:8px; color:var(--muted); font-size:14px; }
.login-access input { width:100%; min-height:46px; font-size:16px; background:white; }
.login-access .primary { width:100%; min-height:46px; font-size:16px; }
.login-access .error-inline { min-height:24px; color:#a52a24; margin:8px 0; overflow-wrap:anywhere; }
@media(max-width:1100px) {
  .workspace-header { gap:24px; }
  .centre-nav { gap:20px; }
  .workspace-header .top-right { gap:10px; }
  .cat-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:960px) {
  .workspace-header { flex-wrap:wrap; gap:12px; padding:18px 24px 0; }
  .centre-nav { order:3; flex-basis:100%; gap:28px; flex-wrap:wrap; }
  .workspace-subbar { padding-inline:24px; }
  .content { padding:28px 24px 40px; }
}
@media(max-width:650px) {
  .workspace-header { padding:18px 16px 0; }
  .workspace-header .brand { font-size:21px; }
  .workspace-header .top-right { font-size:12px; gap:10px; }
  .account-name { max-width:95px; }
  .centre-nav { gap:18px; }
  .centre-nav a { font-size:13px; }
  .workspace-subbar { padding:10px 16px; gap:8px; flex-wrap:wrap; }
  .workspace-heading { flex-basis:100%; }
  .object-nav { gap:4px; }
  .object-nav .nav-button { padding:7px 9px; font-size:13px; }
  .release-panel { left:0; right:auto; max-width:calc(100vw - 32px); }
  .content { padding:26px 16px 40px; }
  .page-heading h1 { font-size:27px; }
  .cat-actions { gap:8px; }
  .cat-actions .button { padding-inline:12px; }
  .cat-filters .search { flex-basis:100%; max-width:none; }
  .cat-view { margin-left:auto; }
  .cat-filters .compact { flex:0 1 auto; }
  .cat-product { padding:16px 14px; gap:12px; }
  .cat-product-copy { flex-basis:calc(100% - 122px); }
  .cat-product-state { padding-left:36px; }
  .cat-cards { grid-template-columns:1fr; }
  .cat-cards .cat-product-state { padding-left:0; }
  .login-stage { padding:30px 16px; }
  .login-stage .login-access { padding:32px 26px 26px; }
  .login-logo { width:110px; height:110px; margin-bottom:16px; }
  .login-access h1 { font-size:34px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }
/* List metadata aligns to stable columns; narrow screens retain it below the title. */
.cat-products:not(.cat-cards) .cat-product {
  display:grid; grid-template-columns:24px 68px minmax(0,1fr) 96px 90px 132px;
}
.cat-list-head {
  display:grid; grid-template-columns:minmax(0,1fr) 96px 90px 132px; gap:18px;
  padding:13px 22px 13px 132px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line);
}
.cat-product-spec, .cat-product-owner { font-size:13px; color:var(--muted); line-height:1.8; overflow-wrap:anywhere; }
.cat-product-spec span { display:block; }
.cat-cards .cat-list-head { display:none; }
.cat-cards .cat-product-spec, .cat-cards .cat-product-owner { grid-column:2; }
@media(max-width:960px) {
  .cat-products:not(.cat-cards) .cat-product { grid-template-columns:24px 68px minmax(0,1fr) 132px; }
  .cat-list-head { display:none; }
  .cat-products:not(.cat-cards) .cat-pick { grid-row:1/4; }
  .cat-products:not(.cat-cards) .cat-thumb { grid-row:1/4; }
  .cat-products:not(.cat-cards) .cat-product-copy { grid-column:3; }
  .cat-products:not(.cat-cards) .cat-product-spec { grid-column:3; }
  .cat-products:not(.cat-cards) .cat-product-spec span { display:inline; margin-right:10px; }
  .cat-products:not(.cat-cards) .cat-product-owner { grid-column:3; }
  .cat-products:not(.cat-cards) .cat-product-state { grid-column:4; grid-row:1/4; }
}
@media(max-width:650px) {
  .cat-products:not(.cat-cards) .cat-product { grid-template-columns:24px 58px minmax(0,1fr); gap:8px 12px; }
  .cat-products:not(.cat-cards) .cat-thumb, .cat-products:not(.cat-cards) .cat-thumb img { width:58px; height:70px; }
  .cat-products:not(.cat-cards) .cat-product-state { grid-column:2/4; grid-row:4; padding:4px 0 0; }
}
.login-password { position:relative; }
.login-password input { padding-right:48px; }
.login-access .password-toggle {
  position:absolute; right:1px; top:1px; width:44px; height:calc(100% - 2px); min-height:44px;
  display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted);
}
.login-access .password-toggle:hover { color:var(--ink); background:var(--accent-light); }
.cat-product-title { margin:7px 0; }
.cat-product-title summary { cursor:pointer; list-style:none; line-height:1.55; }
.cat-product-title summary::-webkit-details-marker { display:none; }
.cat-title-preview { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; }
.cat-title-expand, .cat-title-collapse { color:var(--accent); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.cat-title-collapse { display:none; }
.cat-product-title[open] .cat-title-preview, .cat-product-title[open] .cat-title-expand { display:none; }
.cat-product-title[open] .cat-title-collapse { display:inline; }
@media(max-width:960px) {
  .cat-products:not(.cat-cards) .cat-pick, .cat-products:not(.cat-cards) .cat-thumb { align-self:start; }
}
/* Responsive navigation: persistent desktop rail, modal drawer on portrait devices. */
.shell { display:grid; grid-template-columns:224px minmax(0,1fr); grid-template-rows:auto 1fr; }
.shell.nav-collapsed { grid-template-columns:72px minmax(0,1fr); }
.workspace-sidebar {
  position:fixed; inset:0 auto 0 0; z-index:20; width:224px; height:100dvh;
  display:flex; flex-direction:column; padding:24px 16px 16px;
  background:var(--surface); border-right:1px solid var(--line);
}
.workspace-sidebar .brand, .drawer-heading .brand {
  display:flex; align-items:center; gap:8px; margin:0; padding:0; flex:none;
  font:600 21px/1 Georgia,"Times New Roman",serif; color:var(--ink); letter-spacing:0;
}
.workspace-sidebar > nav { flex:1; min-height:0; overflow-y:auto; padding:22px 0; }
.workspace-nav-group { margin:0 0 18px; }
.workspace-nav-group:last-child { margin-bottom:0; }
.workspace-nav-group h2 { margin:0 0 7px; padding:0 12px; font-size:12px; color:var(--muted); font-weight:500; }
.workspace-nav-group .nav-button {
  display:flex; flex-direction:row; width:100%; margin:3px 0; padding:11px 12px;
  min-height:44px; font-size:14px; gap:10px; color:var(--muted); white-space:normal; justify-content:flex-start; text-align:left;
}
.workspace-nav-group .nav-button.active { color:var(--accent); background:var(--accent-light); }
.workspace-nav-group .nav-button:hover { background:#eeeae2; color:var(--ink); }
.sidebar-toggle { justify-content:flex-start; flex:none; width:100%; font-size:13px; }
.sidebar-toggle svg { transform:rotate(180deg); }
.nav-collapsed .workspace-sidebar { width:72px; padding-inline:12px; }
.nav-collapsed .workspace-sidebar .brand span, .nav-collapsed .workspace-nav-group h2,
.nav-collapsed .workspace-nav-group .nav-button span, .nav-collapsed .sidebar-toggle span { display:none; }
.nav-collapsed .workspace-nav-group .nav-button { padding:12px; justify-content:center; }
.nav-collapsed .sidebar-toggle { padding:10px; justify-content:center; }
.nav-collapsed .sidebar-toggle svg { transform:none; }
.workspace-header { display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--line); grid-column:2; grid-row:1; flex-wrap:nowrap; min-height:76px; padding:12px 32px; gap:16px; }
.shell > .main { grid-column:2; grid-row:2; }
.workspace-label { color:var(--ink); font-size:14px; }
.workspace-header .workspace-heading { flex:1; }
.workspace-header .release-panel { left:0; right:auto; }
.mobile-menu { display:none; }
.navigation-drawer {
  position:fixed; inset:0 auto 0 0; margin:0; padding:22px 18px; width:min(300px,85vw);
  height:100dvh; max-height:100dvh; max-width:85vw; border:0; border-right:1px solid var(--line);
  border-radius:0; color:var(--ink); background:var(--surface); overscroll-behavior:contain;
}
.navigation-drawer::backdrop { background:rgba(36,30,22,.36); }
.drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:28px; }
.navigation-drawer nav { padding-bottom:16px; }
.catalogue { container-type:inline-size; }
@container (max-width:860px) {
  .cat-products:not(.cat-cards) .cat-product { grid-template-columns:24px 68px minmax(0,1fr) 132px; }
  .cat-list-head { display:none; }
  .cat-products:not(.cat-cards) .cat-pick, .cat-products:not(.cat-cards) .cat-thumb { grid-row:1/4; align-self:start; }
  .cat-products:not(.cat-cards) .cat-product-copy, .cat-products:not(.cat-cards) .cat-product-spec,
  .cat-products:not(.cat-cards) .cat-product-owner { grid-column:3; }
  .cat-products:not(.cat-cards) .cat-product-spec span { display:inline; margin-right:10px; }
  .cat-products:not(.cat-cards) .cat-product-state { grid-column:4; grid-row:1/4; }
}
@container (max-width:540px) {
  .cat-products:not(.cat-cards) .cat-product { grid-template-columns:24px 58px minmax(0,1fr); gap:8px 12px; }
  .cat-products:not(.cat-cards) .cat-thumb, .cat-products:not(.cat-cards) .cat-thumb img { width:58px; height:70px; }
  .cat-products:not(.cat-cards) .cat-product-state { grid-column:2/4; grid-row:4; padding:4px 0 0; }
}
@media(max-width:960px) {
  .shell, .shell.nav-collapsed { display:block; }
  .workspace-sidebar { display:none; }
  .workspace-header { padding:12px 24px; min-height:72px; gap:12px; }
  .mobile-menu { display:grid; flex:none; }
}
@media(max-width:650px) {
  .workspace-header { padding:12px 16px; gap:10px; }
  .workspace-header .account-name { display:none; }
  .workspace-header .top-right { gap:10px; }
  .workspace-header .button.quiet { font-size:13px; }
}
@media(max-width:650px) {
  .workspace-header .release-panel { width:min(340px,calc(100vw - 96px)); max-width:calc(100vw - 96px); }
}
/* Keep pagination controls together against the content's right edge. */
.cat-pagination { align-items:center; }
.cat-pagination-controls { margin-left:auto; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:12px; min-width:0; max-width:100%; }
.cat-page-links, .cat-page-numbers, .cat-page-jump { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.cat-page-jump { margin:0; }
.cat-page-jump input { width:64px; min-height:40px; padding:8px; }
.cat-page-jump label { white-space:nowrap; }
.cat-pagination .cat-page-number { min-width:36px; padding-inline:9px; }
.cat-page-number[aria-current=page] { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.cat-page-gap { padding:0 3px; }
@media(max-width:650px) {
  .cat-pagination-controls { width:100%; gap:10px; }
  .cat-page-links { width:100%; }
  .cat-page-links.cat-many-pages { display:grid; grid-template-columns:1fr auto auto; }
  .cat-many-pages > :first-child { grid-column:2; grid-row:1; }
  .cat-many-pages > :last-child { grid-column:3; grid-row:1; }
  .cat-many-pages .cat-page-numbers { grid-column:1/-1; grid-row:2; justify-self:end; flex-wrap:wrap; }
}

.list-paged-item[hidden] { display:none !important; }
.list-pagination-host { min-width:0; width:100%; }
.cat-pagination { container-type:inline-size; }
.cat-pagination-controls { max-width:100%; }
@container (max-width:650px) {
 .cat-pagination-controls { width:100%; }
 .cat-page-links { width:100%; flex-wrap:wrap; }
 .cat-page-numbers { flex-wrap:wrap; }
}

/* Approved workspace utilities: sidebar version, top breadcrumb and account. */
.release-info summary { min-height:44px; }
.release-date { display:block; font-variant-numeric:tabular-nums; }
.sidebar-release .release-panel { top:auto; bottom:calc(100% + 12px); width:340px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 112px); overflow-y:auto; overscroll-behavior:contain; }
.account-menu { position:relative; min-width:0; }
.account-menu summary { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; list-style:none; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary svg { width:16px; height:16px; transform:rotate(90deg); flex:none; }
.account-menu[open] summary svg { transform:rotate(-90deg); }
.workspace-header .account-name { display:block; max-width:min(240px,40vw); overflow-wrap:anywhere; }
.account-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:260px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 160px); overflow:auto; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.account-panel p { color:var(--muted); margin:8px 0 16px; }
.account-panel .button,.account-panel .nav-button { width:100%; justify-content:flex-start; min-height:44px; }
.account-menu summary:hover,.release-info summary:hover { color:var(--ink); }
.account-menu summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.workspace-header .top-right { margin-left:auto; min-width:0; flex-wrap:nowrap; }
.workspace-header .icon-button { min-width:44px; min-height:44px; }
@media(max-width:960px) {
 .workspace-header .workspace-heading { display:grid; flex:1; align-self:center; }
 .workspace-breadcrumb { font-size:12px; gap:6px; }
 .workspace-header { gap:8px; }
 .workspace-header .top-right { gap:4px; }
 .account-menu summary { gap:4px; }
 .workspace-header { align-items:flex-start; }
 .workspace-header .top-right { align-items:flex-start; }
}

.sidebar-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; flex:none; }
.sidebar-heading .brand { font-size:18px; gap:4px; white-space:nowrap; }
.sidebar-heading .brand-mark { width:28px; height:28px; flex:none; }
.sidebar-heading .sidebar-toggle { width:40px; height:44px; min-height:44px; padding:8px; justify-content:center; background:transparent; border:0; }
.nav-collapsed .sidebar-heading { justify-content:center; }
.nav-collapsed .sidebar-heading .brand, .nav-collapsed .sidebar-release { display:none; }
.sidebar-release { flex:none; border-top:1px solid var(--line); padding:14px 4px env(safe-area-inset-bottom); margin-top:12px; }
.sidebar-release summary { line-height:1.7; }
.navigation-drawer[open] { display:flex; flex-direction:column; }
.navigation-drawer > nav { flex:1; min-height:0; overflow:auto; }
.navigation-drawer .sidebar-release { display:block; }
.navigation-drawer .release-panel { width:248px; max-width:100%; }
.workspace-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; line-height:1.6; }
.workspace-breadcrumb a { color:var(--muted); text-decoration:none; }
.workspace-breadcrumb a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.workspace-breadcrumb [aria-current] { color:var(--ink); }
.breadcrumb-separator { color:var(--muted); }
@media(max-width:960px) { .workspace-breadcrumb { font-size:12px; gap:6px; } }