/* ==========================================================================
   Concierge look (29 September 2026): the travel concierge app's design
   system (DESIGN_SYSTEM.md) laid over style.css. Loaded after it when the
   theme is "concierge" (app/themes.py). Tokens, type, shell, cards,
   buttons, forms, nav and the login screen change here; the paper-preview
   panes (.paper*) and the red-for-urgency rule are deliberately untouched.
   ========================================================================== */

:root {
  --bg:        #FFFFFF;
  --card:      #FFFFFF;
  --surface-2: #F7F7F7;
  --surface-3: #EBEBEB;
  --ink:       #222222;
  --ink-2:     #484848;
  --muted:     #6A6A6A;
  --line:      #EBEBEB;
  --line-strong: #DDDDDD;

  --accent:        #3730A3;   /* Indigo: the register's own colour */
  --accent-strong: #2A2480;
  --accent-bg:     #ECEBFA;
  --brand-grad: linear-gradient(90deg, #3730A3 0%, #4338CA 55%, #4F46E5 100%);

  --red:      #C13515;        /* urgency only, as before */
  --red-bg:   #FFF0EC;
  --green:    #008A05;
  --green-bg: #EAF6EA;
  --amber:    #B8761D;
  --amber-bg: #FBF1E3;
  --grey-bg:  #F7F7F7;

  --slate:   #222222;         /* what was navy is now ink */
  --slate-2: #3A3A3A;

  --radius: 16px;
  --r-sm:   12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --shadow:    0 6px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.28);

  --sidebar-w: 248px;
  --font: "DM Sans", "Circular", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --paper: #F7F7F7;
}

@keyframes cr-fade { from { opacity: 0; } }
@keyframes cr-up   { from { transform: translateY(24px); opacity: 0; } }

body { font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--bg); }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h3 { font-size: 16px; font-weight: 600; }
.sub, .empty { font-size: 15px; }
a { color: var(--ink); }
a:hover { color: var(--accent-strong); }
.dim, .muted, .hint { color: var(--muted); }

/* ---- Shell ------------------------------------------------------------- */
.topbar { background: var(--bg); }
.topbar-in { padding: 12px 20px; gap: 12px; }
.brand { font-size: 16px; letter-spacing: -.01em; }
.brand .mark, .brand-mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.search { height: 44px; border-color: var(--line-strong); background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 500; }
.search:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.search > span[aria-hidden] { color: var(--accent); }
.kbd { background: var(--surface-2); border-color: transparent; }
.switcher, .iconbtn, .newbtn { height: 44px; border-color: var(--line-strong); }
.iconbtn { width: 44px; }
.iconbtn:hover { background: var(--surface-2); }
.avatar { width: 40px; height: 40px; font-size: 14px; font-weight: 600; }
.nav { top: 69px; gap: 32px; }
.nav a { height: 70px; font-size: 12px; gap: 6px; }
.nav a svg { width: 24px; height: 24px; }
.me .menu, .newmenu { border-radius: var(--r-sm); box-shadow: var(--shadow-lg); animation: cr-fade .15s ease; }
.content { padding: 28px 20px 56px; }
.pagehead h1 { font-size: 32px; }
.hero { background: var(--brand-grad); border-radius: var(--radius); padding: 28px; }
.hero .btn.light { color: var(--accent-strong); }
.section-h h2 { font-size: 20px; letter-spacing: -.01em; }
.up-card, .tile, .cocard, .card { border-radius: var(--radius); }
.tile, .cocard { padding: 20px; }
.tile:hover, .cocard:hover { box-shadow: var(--shadow); }
.li .ico { border-radius: 12px; background: var(--surface-2); }
.tab { height: 38px; display: inline-flex; align-items: center; border-color: var(--line-strong); }
.cocard .cm, .cohero .comark { background: var(--brand-grad); }

/* ---- Buttons ------------------------------------------------------------ */
.btn, button, .btnlink {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 10px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 600; transition: background .15s, box-shadow .15s, transform .1s, filter .15s;
}
.btn:hover, button:hover, .btnlink:hover { background: var(--surface-2); color: var(--ink); filter: none; }
.btn:active, button:active { transform: scale(.97); }
.btn.primary, .btn.accent, .btn.red, button.accent, .grid-form button[type="submit"]:not(.ghost):not(.small):not(.danger) {
  background: var(--brand-grad); color: #fff; border-color: transparent;
}
.btn.primary:hover, .btn.accent:hover, .btn.red:hover, button.accent:hover { background: var(--brand-grad); filter: brightness(1.06); color: #fff; }
.btn.ghost, button.small, button.ghost { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover, button.small:hover, button.ghost:hover { background: var(--surface-2); border-color: var(--ink); }
button.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }
.btn.danger, button.danger { background: var(--red); color: #fff; border-color: transparent; }
.btn.danger:hover, button.danger:hover { background: var(--red); filter: brightness(1.06); color: #fff; }
.btn:disabled, button:disabled { opacity: .4; }
.link, a.link, button.link { min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.link:hover { background: none; color: var(--accent-strong); }
form.inline button.small { vertical-align: middle; }

/* ---- Cards, panels, tables --------------------------------------------- */
.panel, .action, .pack, .stat, .attn, .doct, .flash, .stage, .chatfull, .viewer, .palette {
  border-color: var(--line);
}
.panel { border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.panel h2 { margin-bottom: 14px; }
.panel.alert { border-left: 4px solid var(--red); }
.action { border-radius: var(--radius); padding: 22px; box-shadow: none; transition: transform .15s, box-shadow .15s; }
.action:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.action .ic { background: var(--surface-2); border-radius: 12px; width: 42px; height: 42px; }
.action.hot .ic { background: var(--brand-grad); }
.action h3 { font-size: 16px; }
.action p { font-size: 14px; }
.doct { border-radius: var(--radius); }
.doct td { padding: 12px 18px; }
.stat { background: var(--surface-2); border: 0; border-radius: var(--r-sm); padding: 16px 18px; }
.stat-k { letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
.stat-v { font-size: 26px; letter-spacing: -.02em; }
a.statlink:hover { background: var(--surface-3); box-shadow: none; }
.kpi div b { font-size: 24px; letter-spacing: -.02em; }
.kpi div span { font-size: 13px; }
.attn { border-radius: var(--radius); border-left: 4px solid var(--red); }
.attn-row { padding: 14px 20px; }
.attn-row .when { font-weight: 700; }
th { font-size: 12px; letter-spacing: .06em; padding-bottom: 10px; }
td { padding: 12px 14px 12px 0; }
.panel > table tr:hover td { background: var(--surface-2); }
.flash { border-radius: var(--r-sm); padding: 12px 16px; font-size: 15px; background: var(--accent-bg); color: var(--accent-strong); border-color: transparent; }
.ok-flash { background: var(--green-bg); color: var(--green); }
.bad-flash { background: var(--red-bg); color: var(--red); }

/* pills: the concierge tag - soft square, 8px */
.pill, .tag { border-radius: 8px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.pill.watch { border-radius: 999px; }
.tag { padding: 3px 8px; }

/* ---- Home: glance, chips, trays ---------------------------------------- */
.gl { border-radius: var(--radius); padding: 16px 18px; }
.gl b { font-size: 24px; }
.gl span { font-size: 13px; }
.gl:hover { box-shadow: var(--shadow); border-color: var(--line); }
.qa { height: 40px; padding: 0 16px; border-color: var(--line-strong); font-size: 14px; font-weight: 500; }
.qa:first-child { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.qa:first-child:hover { filter: none; background: var(--ink); }
.tray { border-radius: var(--radius); margin-bottom: 12px; }
.tray > summary { padding: 16px 20px; font-size: 16px; }
.tray > summary .tm { font-size: 14px; }
.tray > .tb { padding: 0 20px 20px; }

/* ---- Company hub -------------------------------------------------------- */
.cohead .comark { border-radius: var(--radius); background: var(--brand-grad); border: 0; }
.tabs { gap: 24px; }
.tab { padding: 12px 2px; font-size: 15px; }
.tab.on { box-shadow: inset 0 -2px 0 var(--ink); }

/* ---- Wizards ------------------------------------------------------------ */
.steps { gap: 10px; margin-top: 20px; }
.step {
  flex: none; min-width: 0; height: 40px; display: inline-flex; align-items: center; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.step.done { color: var(--accent-strong); background: var(--accent-bg); border-color: transparent; }
.step.now { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; box-shadow: none; }
.wiz { gap: 24px; }
.wiz-foot { margin-top: 20px; }
.chip { border-radius: var(--r-sm); border-color: var(--line-strong); padding: 14px 16px; }
.chip:hover { border-color: var(--ink); }
.chip.on { border-color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }
.pack { border-radius: var(--radius); padding: 16px 18px; }
.pack .doc svg { stroke: var(--accent); }
.paper-label { font-size: 13px; }

/* ---- Forms -------------------------------------------------------------- */
input, select, textarea, .f input, .f select, .f textarea {
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 15px; background: var(--card);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
input::placeholder, textarea::placeholder { color: #9A9A9A; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); }
.f label, .grid-form label, label.inlab { font-size: 13px; font-weight: 600; color: var(--muted); }
label.check { font-size: 14.5px; }
.grid-form { gap: 16px 20px; }
.grid-form h2 { border-top-color: var(--line); }
.f { margin-bottom: 16px; }

/* ---- Palette, chat, viewer --------------------------------------------- */
.palette-back { background: rgba(0,0,0,.45); animation: cr-fade .2s ease; }
.palette { border-radius: var(--radius); animation: cr-up .3s cubic-bezier(.2,.8,.2,1); }
.palette input { padding: 18px 20px; font-size: 16px; border-radius: 0; box-shadow: none; }
.palette input:focus { border-color: var(--line); box-shadow: none; }
.palette-item { border-radius: 10px; padding: 11px 12px; }
.palette-item.sel, .palette-item:hover { background: var(--surface-2); }
.chatpanel { box-shadow: var(--shadow-lg); animation: cr-up .3s cubic-bezier(.2,.8,.2,1); }
.chat-log { background: var(--surface-2); }
.chat-form textarea { border-radius: 14px; }
.msg { border-radius: 14px; font-size: 14.5px; }
.msg.me { background: var(--ink); }
.cc { border-radius: 12px; }
.cc-draft { background: var(--accent-bg); border-color: var(--accent); }
.viewer, .chatfull { border-radius: var(--radius); }
.viewer-body { background: var(--surface-3); }
.preview-frame { border-radius: var(--r-sm); background: var(--surface-3); }
.terms { border-left-color: var(--accent); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.stage { border-radius: 12px; }
.stage.current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.autosave { border-radius: 10px; }
.notes { background: var(--surface-2); border-radius: 10px; }

/* ---- Login and the other standalone cards ------------------------------- */
.login-body { background: var(--surface-2); padding: 24px 16px; }
.login-card, .upload-card {
  width: min(420px, 100%); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 0; overflow: hidden; box-shadow: none;
}
.login-card .brand, .upload-card .brand {
  display: flex; align-items: center; gap: 12px; padding: 22px 24px; margin: 0 0 22px;
  border-bottom: 2px dashed var(--line); font-weight: 700; font-size: 17px;
}
.login-card .brand-name span, .upload-card .brand-name span { color: var(--accent); }
.login-card > *:not(.brand), .upload-card > *:not(.brand) { margin-left: 24px; margin-right: 24px; }
.login-card > *:last-child, .upload-card > *:last-child { margin-bottom: 26px; }
.login-card h1, .upload-card h1 { font-size: 26px; margin-bottom: 4px; }
.login-card .lead, .upload-card .lead { font-size: 15px; margin-bottom: 18px; }
.login-card form, .upload-form { gap: 14px; }
.login-card label, .upload-form label { font-size: 13px; font-weight: 600; gap: 6px; }
.login-card button, .upload-form button { background: var(--brand-grad); color: #fff; border-color: transparent; width: 100%; min-height: 48px; font-size: 15px; }
.login-card button:hover { background: var(--brand-grad); filter: brightness(1.06); }
.login-card .flash { margin-bottom: 14px; }
.codes code { background: var(--surface-2); border-color: var(--line); border-radius: 8px; }

/* ---- Phone: white bottom bar, brass for the current tab ----------------- */
@media (max-width: 700px) {
  .content { padding: 18px 16px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 26px; }
  .panel, .action { padding: 20px; }
  .nav { top: auto; background: var(--bg); box-shadow: none; }
  .nav a { height: 64px; font-size: 11px; }
  .nav a[aria-current="page"] svg { stroke-width: 2.3; }
  .btn, button { min-height: 44px; }
  button.small { min-height: 38px; }
  input, select, textarea { padding: 12px 14px; font-size: 16px; }
  .step { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .wiz-foot { background: var(--card); }
  .search { height: 42px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 14px; }
  .search .kbd { display: none; }
}
@media (max-width: 400px) {
  h1 { font-size: 24px; }
  .btn, button { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .nav { display: none !important; }
}