/* The look of Palatina Consulting for the Palatina build (edition `palatina`, server/edition_brands.json): oxblood and gold on warm white, a bold humanist sans, spaced capitals over a thin
   gold line for the name, round cards, pill buttons. The colours themselves come from /edition.css (the same variables as Control Room, new values); here are the type, the gold line and the few
   places where the profile has its own shape. Added by the server for this edition only (server/edition_web.py): Control Room and the demo never load it. Everything is under body.pal-look. */
body.pal-look {
  --gold: #D5B35B;
  --display: Calibri, Carlito, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --text: Calibri, Carlito, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --r-card: 20px;
  font-size: 17px;                                       /* Calibri runs small: the same body size reads like the rest of the app */
}
body.pal-look .large-title, body.pal-look h1 { color: var(--cobalt-ink); font-weight: 700; letter-spacing: -.01em; }
/* the name of the app in the sidebar: spaced capitals over a thin gold line, as the Palatina wordmark */
body.pal-look .sb-head { border-bottom: 1px solid var(--gold); margin-bottom: 14px; padding-bottom: 14px; }
body.pal-look .sb-head b { font-weight: 500; font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--cobalt-ink); }
body.pal-look .btn.primary { letter-spacing: .01em; }
body.pal-look a:focus-visible, body.pal-look .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 900px) { body.pal-look .sidebar { background: var(--surface); } }           /* the sidebar is warm white, not grey */
/* the first-run and sign-in cards: the name over the gold line too */
body.pal-look .auth-title { color: var(--cobalt-ink); }

/* ---- Start: three steps with one button each (web/palatina_home.js) ---- */
.pl-start { margin: 0 0 22px; padding: 18px 20px 16px; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); border-top: 3px solid var(--gold); }
.pl-start > h2 { margin: 0 0 12px; font-size: 20px; color: var(--cobalt-ink); }
.pl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.pl-step:first-child { border-top: 0; }
.pl-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cobalt-soft); color: var(--cobalt-ink); font-weight: 700; }
.pl-body { display: grid; gap: 2px; min-width: 0; }
.pl-body b { font-size: 17px; }
.pl-body span { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }
.pl-body em { font-style: normal; font-weight: 650; font-size: 14px; color: var(--cobalt-ink); }
.pl-act .btn { white-space: normal; text-align: center; }
.pl-modes { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; line-height: 1.6; }
.pl-mode { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 11px; background: var(--sunk); color: var(--ink-2); font-weight: 650; font-size: 12.5px; white-space: nowrap; }
.pl-mode i { font-style: normal; }
@media (max-width: 640px) {
  .pl-step { grid-template-columns: 32px 1fr; }
  .pl-act { grid-column: 1 / -1; }
  .pl-act .btn { width: 100%; }
}
/* in the simple mode the older cards of Today (the checklist, the new-campaign card) are folded away: the three steps say the same thing once */
body.pal-look.ux #sa-start, body.pal-look.ux #ob-entry { display: none; }
/* the lead's card and the bulk bar: the deal and "add to a campaign" buttons are replaced by one "Start work" (they stay in the advanced mode) */
body.pal-look.ux [data-ldc="deal"], body.pal-look.ux [data-ldc="task"], body.pal-look.ux [data-ldc="campaign"], body.pal-look.ux [data-ld-bulk="deal"], body.pal-look.ux [data-ld-bulk="campaign"] { display: none; }
.pl-no { align-self: start; }

/* "Connect a search key: about ten times more accurate": said once, in Settings (the key's own place). Not repeated as a banner on the wizard, the companies list, the people search and the quick search. */
body.pal-look .ob-keyhint,
body.pal-look .lg-hint,
body.pal-look .fd-nokey,
body.pal-look .lg-est:has(a[href="#/settings/all"]) { display: none; }
body.pal-look .pl-keyhint { margin: 0 0 10px; padding: 12px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14.5px; line-height: 1.5; }

/* ---- the light / dark switch (web/palatina_home.js): a round button next to the name, or beside the client bar on a phone ---- */
body.pal-look .pl-theme { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface); color: var(--cobalt-ink); box-shadow: inset 0 0 0 1px var(--gold); }
body.pal-look .pl-theme:hover { background: var(--cobalt-soft); }
body.pal-look .pl-theme:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.pal-look .pl-theme svg.i { width: 20px; height: 20px; }
body.pal-look .sb-head .pl-theme { margin-left: auto; }
body.pal-look .pl-theme.bar, body.pal-look .pl-theme.float { display: none; }
@media (max-width: 899px) {
  body.pal-look .pl-theme.side { display: none; }
  body.pal-look .pl-theme.bar { display: inline-flex; }
  body.pal-look.has-cl .clientbar.pl-has-theme { display: flex; align-items: center; gap: 8px; }
  body.pal-look.has-cl .clientbar.pl-has-theme .cl-bar { flex: 1 1 auto; min-width: 0; width: auto; }
  body.pal-look:not(.has-cl) .pl-theme.bar { display: none; }
  body.pal-look:not(.has-cl) .pl-theme.float { display: inline-flex; position: fixed; top: calc(var(--safe-t, 0px) + 10px); right: 12px; z-index: 40; }
}
/* the phone's bar of five: "Conversations" is long; a little smaller and tighter, so no name is cut with dots */
@media (max-width: 480px) { body.pal-look .tabbar a { font-size: 10px; letter-spacing: -.02em; padding: 0; } body.pal-look .tabbar a span { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; } }

/* ---- the platform: Start as five steps in ONE column, one main button each; the small client switcher; the plain list of clients (web/palatina_home.js, plPlat) ---- */
.pl-top { margin-bottom: 6px; }
.pl-platform { border-top: 0; padding: 4px 0 8px; background: transparent; box-shadow: none; }
.pl-one-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; counter-reset: none; align-items: stretch; }
.pl-step.pl-one { display: block; padding: 20px 22px 18px; border: 0; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); max-width: none; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.pl-step.pl-one:first-child { border-top: 0; }
.pl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pl-head b { font-size: 19px; line-height: 1.25; color: var(--cobalt-ink); }
.pl-line { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.pl-state { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pl-step.pl-one .pl-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pl-step.pl-one .pl-act .btn { min-height: 46px; padding: 0 22px; font-size: 16px; }
.pl-step.pl-one .pl-act + .btn.plain { margin-top: 8px; }
.pl-modes-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.pl-mode-row { display: grid; gap: 6px; }
.pl-mode-l { font-size: 15px; font-weight: 650; color: var(--ink); }
.pl-seg { max-width: 360px; }
.pl-mode-why { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.cl-bar.pl-small { min-height: 40px; padding: 3px 10px 3px 4px; width: auto; max-width: 100%; }
.cl-bar.pl-small .av { width: 30px; height: 30px; font-size: 12px; }
.cl-bar.pl-small .cl-name b { font-size: 14px; }
.pl-clients .pl-client { width: 100%; text-align: left; }
@media (max-width: 640px) { .pl-step.pl-one { padding: 16px 16px 14px; } .pl-step.pl-one .pl-act .btn { width: 100%; } }

/* ---- the five steps as five short screens (#/step/1 … #/step/5, palatina_steps.js) */
.ps { max-width: 720px; }
.ps .navbar { padding-left: 0; }
.ps-of { margin: 6px 0 2px; font-size: 14px; font-weight: 650; color: var(--cobalt-ink); }
.ps .large-title { font-size: 28px; line-height: 1.2; margin-bottom: 8px; }
.ps .lede { font-size: 16.5px; margin-bottom: 18px; }
.ps-card { margin: 0 0 14px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.ps-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.ps-sub { margin: 18px 0 10px; font-size: 16px; color: var(--ink-2); }
.ps-ok { border-top: 3px solid var(--gold); }
.ps-big { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--ink); }
.ps-hint { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.ps-small { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-3); }
.ps-or { margin: 14px 0 8px; font-size: 15px; color: var(--ink-2); }
.ps-err { margin: 8px 0 0; color: var(--red-ink, #b3261e); font-size: 14.5px; }
.ps-err:empty { display: none; }
.ps-drop { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px 16px; border-radius: 14px; border: 2px dashed var(--line-strong); cursor: pointer; background: var(--surface-2); }
.ps-drop b { font-size: 17px; color: var(--ink); }
.ps-drop span { font-size: 14px; color: var(--ink-3); }
.ps-drop:hover, .ps-drop:focus-within { border-color: var(--cobalt); }
.ps-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ps-files li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--sunk); font-size: 14.5px; }
.ps-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-und textarea { font-size: 16px; line-height: 1.5; }
.ps-f { display: grid; gap: 6px; margin: 0 0 14px; }
.ps-f > span { font-size: 15px; font-weight: 650; color: var(--ink); }
.ps-f .inp { width: 100%; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.ps-two em { font-style: normal; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.ps-adv { margin: 4px 0 14px; }
.ps-advin { padding: 4px 14px 2px; }
.ps-next { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ps-next .btn { min-height: 46px; padding: 0 22px; font-size: 16px; }
.ps-job { display: grid; gap: 6px; margin-top: 8px; }
.ps-job small { color: var(--ink-3); font-size: 13.5px; }
.ps-pair { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ps-row .t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps-list { margin-top: 12px; }
.ps-files3 { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ps-chip { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 0; cursor: pointer; background: var(--sunk); color: var(--ink-2); font-size: 15px; font-weight: 550; box-shadow: inset 0 0 0 1px var(--line); }
.ps-chip[aria-pressed="true"] { background: var(--cobalt-soft); color: var(--cobalt-ink); box-shadow: inset 0 0 0 2px var(--cobalt); font-weight: 650; }
.ps-own { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.ps-own .inp { flex: 1 1 auto; min-width: 0; }
.ps-modes { margin-top: 4px; }
.ps-rehearsal { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 640px) { .ps-card { padding: 16px 16px 14px; } .ps-next .btn { width: 100%; } .ps-two { grid-template-columns: 1fr 1fr; } .ps-two em { grid-column: 1 / -1; } .ps-pair .btn { flex: 1 1 auto; } .ps .large-title { font-size: 24px; } }
.pl-own { margin: 0 0 2px; font-size: 14px; font-weight: 650; color: var(--cobalt-ink); }
.ms-fold { margin-top: 18px; }
.ps-more { margin-top: 22px; }
.ps-w { margin: 0 0 14px; }
.ps-w b { display: block; margin-bottom: 4px; font-size: 15px; }
.ps-w p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.ps-w .ps-next { margin-top: 8px; }
#ps-words { order: 4; }
#ps-words .pal-back { margin: 0 0 12px; }
.ms-mrow { flex-wrap: wrap; }
.ms-mrow .s.one { white-space: normal; }
.ms-mrow .sig { flex: 1 0 100%; order: 5; margin: 2px 0 0 52px; white-space: normal; }

/* Platform, Palatina edition: no entrance to the Advanced part (its screens are closed there). */
.pal-platform .sb-adv-sub, .pal-platform #advbar, .pal-platform a[href="#/advanced"], .pal-platform .ux-mode, .pal-platform .ux-quick { display: none !important; }

/* Platform, Palatina edition: no yellow "Needs a look" box and chip on the cards (the first words are checked when they are made). */
.pal-platform .sm-look, .pal-platform .tag.warm { display: none !important; }

/* the five steps as a dashboard: a progress strip, two columns, the step to press now stands out, a finished step is quiet and marked */
.pl-prog { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 14px; }
.pl-prog i { height: 6px; border-radius: 3px; background: var(--line); }
.pl-prog i.on { background: var(--gold); }
.pl-prog i.cur { background: var(--cobalt); }
.pl-step.pl-one:last-child { grid-column: 1 / -1; }
.pl-step.pl-one .pl-act { margin-top: auto; justify-content: flex-start; }
.pl-step.pl-one .pl-state { font-size: 22px; letter-spacing: -.01em; }
.pl-step.pl-one.pl-cur { box-shadow: inset 0 0 0 2px var(--cobalt), 0 6px 18px rgba(0,0,0,.06); }
.pl-step.pl-one.pl-done .pl-no { background: var(--gold); color: #fff; }
.pl-step.pl-one.pl-done .pl-no { font-size: 0; }
.pl-step.pl-one.pl-done .pl-no::after { content: ""; display: block; box-sizing: border-box; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(0, -1.5px) rotate(45deg); }
.pl-step.pl-one:not(.pl-cur) .pl-act .btn.primary { background: var(--surface); color: var(--cobalt-ink); box-shadow: inset 0 0 0 1px var(--line); }
.pl-step.pl-one:not(.pl-cur) .pl-act .btn.primary:hover { box-shadow: inset 0 0 0 1px var(--cobalt); }
@media (max-width: 760px) { .pl-step.pl-one .pl-state { font-size: 19px; } }
.pl-step.pl-one > .btn { align-self: flex-start; }
/* smaller blocks */
.pl-step.pl-one { padding: 14px 16px 12px; }
.pl-one-col { gap: 10px; }
.pl-head { gap: 9px; margin-bottom: 5px; }
.pl-head b { font-size: 16px; }
.pl-head .pl-no { width: 26px; height: 26px; font-size: 13px; flex: 0 0 26px; }
.pl-line { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.pl-step.pl-one .pl-state { margin: 0 0 10px; font-size: 18px; }
.pl-step.pl-one .pl-act { gap: 8px; }
.pl-step.pl-one .pl-act .btn { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.pl-prog i { height: 5px; }

/* ---- calmer look: square-ish corners, hairlines instead of shadows and gold lines, ordinary buttons, no rows of coloured pills ---- */
body.pal-look { --r-card: 10px; --shadow-card: none; --shadow-float: 0 4px 16px rgba(20, 16, 12, .10); --qp: 22px; }
body.pal-look .qcard, body.pal-look .ps-card, body.pal-look .pl-step.pl-one, body.pal-look .card { box-shadow: none; border: 1px solid var(--line); }
body.pal-look .pl-step.pl-one { box-shadow: none; }
body.pal-look .pl-step.pl-one.pl-cur { border-color: var(--cobalt); box-shadow: none; }
body.pal-look .ps-ok { border-top: 1px solid var(--line); }
body.pal-look .btn { border-radius: 8px; font-weight: 550; }
body.pal-look .btn.approve { border-radius: 8px; }
body.pal-look .pl-no { border-radius: 6px; width: 26px; height: 26px; font-size: 13px; font-weight: 600; }
body.pal-look .pl-step.pl-one.pl-done .pl-no { background: var(--cobalt); }
body.pal-look .pl-prog { gap: 4px; margin-bottom: 16px; }
body.pal-look .pl-prog i { height: 3px; border-radius: 0; }
body.pal-look .pl-prog i.on { background: var(--cobalt); }
body.pal-look .pl-prog i.cur { background: var(--gold); }
body.pal-look .pl-head b, body.pal-look .large-title, body.pal-look h1 { font-weight: 650; }
body.pal-look .pl-step.pl-one .pl-state { font-weight: 600; }
body.pal-look .sb-head { border-bottom-width: 1px; }
body.pal-look .camp-chip, body.pal-look .pl-mode, body.pal-look .tag:not(.good):not(.bad):not(.cool) { border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
body.pal-look .ch, body.pal-look .q-kind .camp-chip { font-weight: 500; }

/* ---- the card on Start ("Needs you"): one left and right margin for everything inside, so text, notes and buttons line up ---- */
body.pal-look .qcard .q-who { padding: 18px var(--qp) 0; }
body.pal-look .qcard .q-to { padding: 14px var(--qp) 12px; gap: 14px; }
body.pal-look .qcard .q-kind { padding: 0 var(--qp) 12px; }
body.pal-look .qcard .letter { margin: 0 var(--qp); padding: 16px 18px; border-radius: 8px; font-size: 16px; line-height: 1.55; }
body.pal-look .qcard textarea.letter { width: calc(100% - 2 * var(--qp)); }
body.pal-look .qcard .q-li { padding: 12px var(--qp) 0; gap: 8px 10px; }
body.pal-look .qcard .q-li > .muted { flex: 1 1 100%; font-size: 14px; line-height: 1.45; margin-bottom: 2px; }
body.pal-look .qcard .q-li .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
body.pal-look .qcard .q-act { padding: 16px var(--qp) 14px; gap: 10px; }
body.pal-look .qcard .q-act .btn { min-height: 46px; }
body.pal-look .qcard .q-foot { padding: 0 var(--qp) 18px; }
@media (max-width: 640px) { body.pal-look { --qp: 16px; } }

/* =====================================================================================================================================================================
   The Palatina design system, in the typeface and colours of the Company Profile (one layer over the older rules above; the brand colours are NOT changed: oxblood #88241E, gold #D5B35B, warm ivory #F7F2EC, graphite ink).
   Type: the system sans, three sizes of text (13 / 15 / 17), titles 24-28 at weight 600 in graphite. One radius for controls (8), one for panels (10). Hairlines instead of shadows.
   Gold only marks progress, the open step and the current place in the menu; oxblood is the one primary action. Motion: 120 ms, colour and opacity only.
   ===================================================================================================================================================================== */
body.pal-look {
  --text: Calibri, Carlito, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;          /* Calibri: the typeface of the Palatina Company Profile, kept */
  --display: Calibri, Carlito, "Segoe UI", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --r-card: 10px; --r-group: 10px; --r-row: 8px;
  --line: rgba(33, 28, 24, .10); --line-strong: rgba(33, 28, 24, .22);
  --ink: #1F1B18; --ink-2: #4E4741; --ink-3: #7A726A;
  --t-fast: 120ms cubic-bezier(.2, .6, .2, 1);
  font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
/* the dark theme keeps its own greys and lines: the light ones above sit on the body and would otherwise win over the colours of /edition.css (dark ink on a black page: titles and texts unreadable) */
:root[data-theme="dark"] body.pal-look { --line: rgba(243, 241, 238, .10); --line-strong: rgba(243, 241, 238, .22); --ink: #F3F1EE; --ink-2: #BDB9B4; --ink-3: #8F8B86; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.pal-look { --line: rgba(243, 241, 238, .10); --line-strong: rgba(243, 241, 238, .22); --ink: #F3F1EE; --ink-2: #BDB9B4; --ink-3: #8F8B86; } }
body.pal-look h1, body.pal-look .large-title { font: 700 30px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
body.pal-look h2 { font: 600 17px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
body.pal-look h3 { font: 600 15px/1.35 var(--display); color: var(--ink); }
body.pal-look .pl-own { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
body.pal-look .muted, body.pal-look .ps-hint, body.pal-look .ps-small { color: var(--ink-3); }

/* sidebar: a quiet list, the open place has a gold bar on its left edge */
body.pal-look .sidebar { background: var(--bg); border-right: 1px solid var(--line); }
body.pal-look .sb-head { border-bottom: 1px solid var(--gold); padding: 6px 8px 16px; margin-bottom: 14px; }
body.pal-look .sb-head b { font-weight: 500; font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--cobalt-ink); }
body.pal-look .sb-nav { gap: 1px; }
body.pal-look .sb-nav a { position: relative; min-height: 36px; padding: 0 10px 0 12px; border-radius: 6px; font-size: 16px; font-weight: 500; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
body.pal-look .sb-nav a svg.i { width: 18px; height: 18px; stroke-width: 1.6; opacity: .75; }
body.pal-look .sb-nav a:hover { background: rgba(33, 28, 24, .045); color: var(--ink); }
body.pal-look .sb-nav a[aria-current="page"] { background: rgba(33, 28, 24, .06); color: var(--ink); font-weight: 600; }
body.pal-look .sb-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--gold); }
body.pal-look .sb-nav a[aria-current="page"] svg.i { opacity: 1; }
body.pal-look .sb-nav .badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.pal-look .sb-foot .btn { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 14px; }

/* buttons: oxblood primary, white secondary with a hairline, plain text for the third level */
body.pal-look .btn { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 16px; font-weight: 550; letter-spacing: -.005em; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast); }
body.pal-look .btn:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
body.pal-look .btn:active { transform: translateY(.5px); }
body.pal-look .btn.primary, body.pal-look .btn.approve { background: var(--cobalt); color: #fff; box-shadow: none; }
body.pal-look .btn.primary:hover, body.pal-look .btn.approve:hover { background: var(--cobalt-ink); filter: none; }
body.pal-look .btn.plain { background: transparent; box-shadow: none; color: var(--cobalt-ink); padding: 0 8px; }
body.pal-look .btn.plain:hover { background: rgba(136, 36, 30, .06); }
body.pal-look .btn[disabled], body.pal-look .btn:disabled { opacity: .45; cursor: default; }
body.pal-look .btn:focus-visible, body.pal-look a:focus-visible, body.pal-look input:focus-visible, body.pal-look select:focus-visible, body.pal-look textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.pal-look .qcard .q-act .btn.approve { background: var(--cobalt); }

/* fields */
body.pal-look .inp, body.pal-look input[type="text"], body.pal-look input[type="email"], body.pal-look input[type="password"], body.pal-look input[type="number"], body.pal-look input[type="search"], body.pal-look select, body.pal-look textarea {
  min-height: 40px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); border: 0; font-size: 16.5px; color: var(--ink); transition: box-shadow var(--t-fast); }
body.pal-look .inp:hover, body.pal-look input:hover, body.pal-look select:hover, body.pal-look textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
body.pal-look .inp:focus, body.pal-look input:focus, body.pal-look select:focus, body.pal-look textarea:focus { box-shadow: inset 0 0 0 1.5px var(--cobalt); outline: none; }
body.pal-look .ps-f > span, body.pal-look label.lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

/* panels, lists, tables: no shadows, hairline separators, tabular figures */
body.pal-look .group, body.pal-look .ps-card, body.pal-look .card, body.pal-look .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
body.pal-look .row { min-height: 52px; transition: background var(--t-fast); }
body.pal-look .row:hover { background: rgba(33, 28, 24, .025); }
body.pal-look .row + .row::before { border-top-color: var(--line); }
body.pal-look .row .t { font-size: 15px; font-weight: 600; }
body.pal-look .row .s { font-size: 14px; color: var(--ink-2); }
body.pal-look table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
body.pal-look th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
body.pal-look td { padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 16px; }
body.pal-look tbody tr { transition: background var(--t-fast); }
body.pal-look tbody tr:hover { background: rgba(33, 28, 24, .03); }
body.pal-look .seg { background: rgba(33, 28, 24, .06); border-radius: 8px; }
body.pal-look .seg button, body.pal-look .seg a { border-radius: 6px; min-height: 32px; font-size: 14px; transition: background var(--t-fast), color var(--t-fast); }
body.pal-look .seg [aria-pressed="true"], body.pal-look .seg [aria-current], body.pal-look .seg .on { background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); }
body.pal-look .tag:not(.good):not(.bad):not(.cool), body.pal-look .camp-chip { height: 22px; border-radius: 4px; font-size: 12px; font-weight: 550; }

/* dialogs and sheets */
body.pal-look .sheet, body.pal-look dialog, body.pal-look .modal { border-radius: 12px; box-shadow: 0 16px 48px rgba(20, 16, 12, .18); border: 1px solid var(--line); }
body.pal-look .scrim, body.pal-look .backdrop { background: rgba(31, 27, 24, .38); }
body.pal-look .toast { border-radius: 8px; box-shadow: 0 8px 28px rgba(20, 16, 12, .16); border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) { body.pal-look * { transition: none !important; animation: none !important; } }

/* Start: the five steps as cards (two columns), in the design layer's hand: flat, one margin, quiet buttons */
body.pal-look .pl-step.pl-one { padding: 16px 18px 14px; }
body.pal-look .pl-head b { font-size: 18px; color: var(--cobalt-ink); }
body.pal-look .pl-line { font-size: 15.5px; }
body.pal-look .pl-step.pl-one .pl-state { font-size: 19px; }
body.pal-look .pl-step.pl-one .pl-act .btn { min-height: 40px; font-size: 15.5px; }

/* a line of small labels inside a list row is not cut: the clamp of the row's text lines (which needs overflow hidden) is lifted where labels sit in it */
body.pal-look .row .s.sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow: visible; -webkit-line-clamp: unset; font-size: 14px; line-height: 1.4; }
body.pal-look .tag, body.pal-look .camp-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; line-height: 1; font-size: 13px; white-space: nowrap; }
body.pal-look .row .body { overflow: visible; }

/* ---- Start in three parts (onboarding, hunting, farming): each part has its own heading and one line saying what it is for ---- */
body.pal-look .pl-part { margin: 0 0 30px; }
body.pal-look .pl-part-h { margin: 0 0 12px; padding: 0 2px; }
body.pal-look .pl-part-h h2 { margin: 0; font: 700 22px/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
body.pal-look .pl-part-h p { margin: 4px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.45; color: var(--ink-3); }
body.pal-look .pl-part .pl-one-col { margin-top: 0; }
body.pal-look .pl-farm .pl-head { margin-bottom: 6px; }
body.pal-look .pl-onb .pl-step.pl-one:last-child { grid-column: auto; }

/* Start, step 4: the three sub-steps of the onboarding (enrich, score, launch order) */
.pl-sub { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line, rgba(0,0,0,.12)); display: grid; gap: 8px; }
.pl-sub li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; align-items: baseline; font-size: 14px; }
.pl-sub li b { font-weight: 600; color: var(--ink); }
.pl-sub li span { color: var(--ink-2, var(--ink)); }
@media (max-width: 760px) { .pl-sub li { grid-template-columns: 1fr; gap: 2px; } }

/* Start, redesigned: the journey (three parts of the process), the four numbers, the one next step, then the "Needs you" list, then the steps as quiet cards with a status */
.pl-hero { display: grid; gap: 12px; margin: 8px 0 18px; }
.pl-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-ph { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.pl-ph.cur { box-shadow: inset 0 0 0 2px var(--cobalt); }
.pl-ph-n { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink-2); font: 700 14px var(--display); }
.pl-ph.cur .pl-ph-n { background: var(--cobalt); color: var(--on-accent); }
.pl-ph.done .pl-ph-n { background: var(--gold); color: #fff; }
.pl-ph > div { flex: 1; min-width: 0; }
.pl-ph b { display: block; font-size: 16px; color: var(--ink); }
.pl-ph small { display: block; margin: 2px 0 9px; color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.pl-bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pl-bar u { display: block; height: 100%; border-radius: 3px; background: var(--gold); text-decoration: none; }
.pl-ph.cur .pl-bar u { background: var(--cobalt); }
.pl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pl-kpi { padding: 14px 16px; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
.pl-kpi b { display: block; font: 700 30px/1.1 var(--display); letter-spacing: -.02em; color: var(--cobalt-ink); }
.pl-kpi span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 13.5px; }
.pl-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--r-card); background: var(--cobalt); color: var(--on-accent); }
.pl-next small { display: block; opacity: .8; font-size: 12.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.pl-next b { display: block; margin-top: 2px; font-size: 19px; line-height: 1.25; }
.pl-next .btn.primary { flex: none; min-height: 44px; padding: 0 24px; background: var(--on-accent); color: var(--cobalt-ink); box-shadow: none; }
.pl-part { margin: 0 0 22px; }
.pl-part-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--gold); }
.pl-part-h h2 { margin: 0; font-size: 21px; color: var(--cobalt-ink); }
.pl-part-h p { margin: 0; color: var(--ink-3); font-size: 14px; }
.pl-pill { margin-left: auto; flex: none; padding: 2px 10px; border-radius: 11px; background: var(--sunk); color: var(--ink-3); font-size: 12px; font-weight: 700; }
.pl-step.pl-one.pl-cur .pl-pill { background: var(--cobalt); color: var(--on-accent); }
.pl-step.pl-one.pl-done .pl-pill { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); color: var(--ink-2); }
.pl-step.pl-one.pl-done { opacity: .92; }
.pl-sub { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pl-sub li { display: grid; grid-template-columns: 1fr; gap: 1px; padding-left: 14px; position: relative; }
.pl-sub li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pl-sub b { font-size: 14.5px; color: var(--ink); }
.pl-sub span { font-size: 13.5px; color: var(--ink-3); line-height: 1.35; }
#needs { margin: 0 0 22px; }
/* the safety and cost card under the hero (web/palatina_home.js, GET /api/palatina/cockpit): four calm cells; the state is said in words, the colour only backs it */
#pl-safe:empty { display: none; }
.pl-safe { margin: -4px 0 20px; padding: 14px 16px 12px; background: var(--surface); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); border-left: 4px solid var(--moss); }
.pl-safe.watch { border-left-color: var(--amber); }
.pl-safe.stop { border-left-color: var(--brick); }
.pl-safe > header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 8px; }
.pl-safe h2 { margin: 0; font-size: 17px; color: var(--cobalt-ink); }
.pl-safe-s { color: var(--ink-3); font-size: 13.5px; font-weight: 650; }
.pl-safe.watch .pl-safe-s { color: var(--amber-ink); }
.pl-safe.stop .pl-safe-s { color: var(--brick); }
.pl-sfs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
@media (min-width: 900px) { .pl-sfs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 460px) { .pl-sfs { grid-template-columns: minmax(0, 1fr); } }
.pl-sf { display: grid; align-content: start; gap: 2px; padding: 8px 0 6px; min-width: 0; }
.pl-sf-l { color: var(--ink-3); font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.pl-sf-v { font: 700 22px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.pl-sf.ok .pl-sf-v { color: var(--moss); }
.pl-sf.warn .pl-sf-v { color: var(--amber-ink); }
.pl-sf.bad .pl-sf-v { color: var(--brick); }
.pl-sf.idle .pl-sf-v { color: var(--ink-2); }
.pl-sf-n { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.pl-sf-n a { color: var(--cobalt-ink); font-weight: 650; }
.pl-meter { display: block; height: 5px; margin: 3px 0 2px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.pl-meter u { display: block; height: 100%; background: var(--moss); border-radius: 3px; text-decoration: none; }
.pl-meter.warn u { background: var(--amber); }
.pl-meter.bad u { background: var(--brick); }
@media (max-width: 760px) {
  .pl-journey { grid-template-columns: 1fr; }
  .pl-kpis { grid-template-columns: repeat(2, 1fr); }
  .pl-next { flex-direction: column; align-items: stretch; }
  .pl-next .btn.primary { width: 100%; }
}