/* Schedulo CMS and client area.
   Follows the Schedulo brand book and the Schedulo Software UI Guidelines 1.0 ("Midnight Rail"):
   a Midnight Navy rail, a light working area, Montserrat, Electric Blue for everything you can
   press, 10/14/22 px corners, sentence case (capitals only for the rail's section labels). */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("/fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("/fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("/fonts/Montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/fonts/Montserrat-700.woff2") format("woff2"); }

:root {
  /* brand palette */
  --navy: #071433;
  --electric: #1E4BFF;
  --bright: #3F7BFF;
  --cyan: #00C2FF;
  --sky: #209FFF;
  --light: #E5E9F7;
  --white: #FFFFFF;
  --licence: #FF8800;

  /* guideline tokens */
  --s-rail: #071433;
  --s-rail-ink: #C9D1EA;
  --s-rail-dim: #9AA6C6;
  --s-rail-head: #8A96BA;
  --s-rail-hover: #16223F;
  --s-rail-selected: #132B60;
  --s-rail-line: #1C2C55;
  --s-ground: #F4F6FB;
  --s-surface: #FFFFFF;
  --s-soft: #E5E9F7;
  --s-line: #D5DBEE;
  --s-line-strong: #C2CADE;
  --s-zebra: #F7F8FC;
  --s-row-hover: #EDF0FA;
  --s-head-bg: #ECEFF8;
  --s-ink: #071433;
  --s-ink-2: #4A5677;
  --s-ink-3: #616B8A;
  --s-action: #1E4BFF;
  --s-action-hover: #1A3FE0;
  --s-action-dark: #1335C0;
  --s-action-ink: #1E4BFF;
  --s-focus: #00C2FF;
  --s-ok: #047857;
  --s-ok-soft: #E3F5EC;
  --s-warn: #B45309;
  --s-warn-soft: #FEF6E7;
  --s-bad: #DC2626;
  --s-bad-ink: #B42318;
  --s-bad-soft: #FFF5F5;
  --s-info: #0068B0;
  --s-info-soft: #E0F5FF;
  --s-r-sm: 10px;
  --s-r: 14px;
  --s-r-lg: 22px;
  --s-shadow: 0 12px 32px rgba(7, 20, 51, .14);
  --rail-w: 232px;
  --night: radial-gradient(ellipse 55% 45% at 82% 22%, rgba(46,98,255,.38), rgba(46,98,255,0) 70%), linear-gradient(162deg, #0D2058 0%, #081845 38%, #071433 62%, #060F2B 100%);

  /* older names still used by some pages */
  --bg: var(--s-ground);
  --surface: var(--s-surface);
  --text: var(--s-ink);
  --muted: var(--s-ink-2);
  --line: var(--s-line);
  --danger: var(--s-bad-ink);
  --danger-bg: var(--s-bad-soft);
  --ok: var(--s-ok);
  --ok-bg: var(--s-ok-soft);
  --radius: var(--s-r);
  --shadow: var(--s-shadow);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; color: var(--s-ink); background: var(--s-ground); line-height: 1.55; font-size: 14.5px; min-height: 100vh; }
body.night { background: var(--navy); background-image: var(--night); display: flex; flex-direction: column; }
a { color: var(--s-action-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--s-action-hover); }
h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .5em; letter-spacing: -.015em; line-height: 1.25; }
h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 .9em; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; border-radius: 6px; }
.ico { flex-shrink: 0; display: block; }
[hidden] { display: none !important; }
.small { font-size: .84rem; color: var(--s-ink-2); }
.lede { font-size: 1rem; color: var(--s-ink-2); max-width: 760px; }
.eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--s-action); margin: 0 0 18px; }
.empty { color: var(--s-ink-3); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--s-surface); padding: 8px 14px; border-radius: var(--s-r-sm); }
.skip:focus { left: 8px; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; background: var(--s-soft); border-radius: 6px; padding: 1px 6px; }

/* tags and pills */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 600; background: var(--s-soft); color: var(--s-action-dark); border-radius: 999px; padding: 2px 10px; vertical-align: middle; white-space: nowrap; }
.tag.ok { background: var(--s-ok-soft); color: var(--s-ok); }
.tag.warn { background: var(--s-warn-soft); color: var(--s-warn); }
.tag.bad { background: var(--s-bad-soft); color: var(--s-bad-ink); }
.tag.muted { background: var(--s-head-bg); color: var(--s-ink-2); }
.pill { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; justify-content: center; background: var(--s-action); }
.pill.bad { background: var(--s-bad); }
.pill.warn { background: var(--s-warn); }
.pill.ok { background: var(--s-ok); }

/* ---------- frame: rail, top bar, working area ---------- */
body.has-rail { padding-left: var(--rail-w); }
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); background: var(--s-rail); color: var(--s-rail-ink); display: flex; flex-direction: column; padding: 18px 12px 12px; overflow-y: auto; z-index: 30; scrollbar-width: thin; scrollbar-color: #2A3A66 transparent; }
.rail-brand { display: grid; grid-template-columns: auto; gap: 6px; padding: 2px 10px 18px; text-decoration: none; }
.rail-logo { height: 30px; width: auto; }
.rail-sym { display: none; height: 30px; width: auto; }
.rail-area { font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); padding-left: 2px; }
.rail-nav { display: grid; gap: 14px; flex: 1; align-content: start; }
.rail-group { display: grid; gap: 2px; }
.rail-label { margin: 0 0 4px; padding: 0 12px; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--s-rail-head); }
.rail-nav a, .rail-me, .rail-out { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--s-r-sm); color: var(--s-rail-ink); text-decoration: none; font-weight: 500; font-size: .92rem; }
.rail-nav a .ico { color: var(--s-rail-dim); }
.rail-nav a:hover, .rail-me:hover, .rail-out:hover { background: var(--s-rail-hover); color: #fff; }
.rail-nav a:hover .ico { color: #fff; }
.rail-nav a[aria-current="page"] { background: var(--s-rail-selected); color: #fff; font-weight: 600; }
.rail-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bright); }
.rail-nav a[aria-current="page"] .ico { color: #7FA5FF; }
.rail-foot { border-top: 1px solid var(--s-rail-line); margin-top: 14px; padding-top: 12px; display: grid; gap: 2px; }
.rail-foot form { margin: 0; }
.rail-me .rail-text { display: grid; line-height: 1.25; min-width: 0; }
.rail-me strong { font-weight: 600; color: #fff; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-me small { color: var(--s-rail-head); font-size: .74rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--bright), var(--electric)); color: #fff; font-weight: 700; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }
.rail-out { width: 100%; background: none; border: 0; font: inherit; font-size: .88rem; cursor: pointer; color: var(--s-rail-dim); }
.rail-out .ico { margin: 0 6px; }

.work { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--s-line); }
.topbar-title { margin: 0; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-title span { color: var(--s-ink-3); font-weight: 500; margin-right: 6px; }
.topbar-title span::after { content: "/"; margin-left: 8px; color: var(--s-line-strong); }
.topbar-tools { margin-left: auto; display: flex; gap: 4px; }
.quiet { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--s-r-sm); color: var(--s-ink-2); text-decoration: none; font-weight: 500; font-size: .88rem; }
.quiet:hover { background: var(--s-soft); color: var(--s-ink); }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--s-line); border-radius: var(--s-r-sm); background: var(--s-surface); color: var(--s-ink); align-items: center; justify-content: center; cursor: pointer; margin-left: -6px; }
.main { width: 100%; max-width: 1280px; padding: 28px 28px 48px; flex: 1; }
body:not(.has-rail) .work { min-height: 100vh; }
.foot { padding: 18px 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--s-ink-3); font-size: .8rem; border-top: 1px solid var(--s-line); }
.foot a { color: var(--s-ink-2); }
.scrim { position: fixed; inset: 0; background: rgba(7, 20, 51, .45); z-index: 25; }

/* folded rail (icons only) */
@media (max-width: 1099px) and (min-width: 761px) {
  body.has-rail { --rail-w: 72px; }
  .rail { padding: 16px 10px 10px; }
  .rail-logo, .rail-area, .rail-text, .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail-sym { display: block; margin: 0 auto; }
  .rail-brand { padding: 2px 0 16px; justify-items: center; }
  .rail-group + .rail-group { border-top: 1px solid var(--s-rail-line); padding-top: 12px; }
  .rail-nav a, .rail-me, .rail-out { justify-content: center; padding: 8px; }
  .rail-nav a[aria-current="page"]::before { left: -10px; }
  .rail-out .ico { margin: 0; }
  .pill { position: absolute; top: 2px; right: 0; margin: 0; min-width: 18px; height: 16px; font-size: .64rem; padding: 0 4px; }
}

/* phones: the rail slides in from the left */
@media (max-width: 760px) {
  body.has-rail { padding-left: 0; }
  .rail { width: 272px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--s-shadow); }
  body.rail-open .rail { transform: none; }
  .has-rail .menu-toggle { display: inline-flex; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar-title span, .quiet span { display: none; }
  .quiet { padding: 0 10px; }
  .main { padding: 20px 16px 40px; }
  .foot { padding: 16px; }
}

/* ---------- buttons and forms (36 px, 10 px corners) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; background: var(--s-action); color: var(--white); border: 1px solid var(--s-action); border-radius: var(--s-r-sm); padding: 8px 18px; font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--s-action-hover); border-color: var(--s-action-hover); color: #fff; }
.btn:active { background: var(--s-action-dark); }
.btn.ghost-dark, .btn.secondary { background: var(--s-surface); color: var(--s-action-ink); border-color: var(--s-line-strong); }
.btn.ghost-dark:hover, .btn.secondary:hover { background: var(--s-soft); border-color: var(--s-action); color: var(--s-action-dark); }
.btn.sm { min-height: 32px; padding: 5px 12px; font-size: .84rem; }
.btn.google { background: var(--white); color: var(--s-ink); border-color: var(--s-line-strong); width: 100%; min-height: 44px; }
.btn.google:hover { background: var(--s-ground); color: var(--s-ink); }
.btn.google .g { font-weight: 700; color: var(--s-action); }
.danger-btn, .btn.danger-btn { background: var(--s-bad-ink); border-color: var(--s-bad-ink); color: #fff; }
.danger-btn:hover, .btn.danger-btn:hover { background: #8f1c13; border-color: #8f1c13; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--s-action-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stack { display: grid; gap: 16px; }
.narrow { max-width: 600px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: .9rem; }
input[type=email], input[type=password], input[type=text], input[type=search], input[type=date], input[type=number], input[type=url], input:not([type]), select, textarea {
  font: inherit; font-size: .92rem; padding: 9px 12px; min-height: 40px; border: 1px solid var(--s-line-strong); border-radius: var(--s-r-sm); background: var(--s-surface); color: var(--s-ink); width: 100%; transition: border-color .12s, box-shadow .12s;
}
input:hover, select:hover, textarea:hover { border-color: #A4B0CC; }
input:focus, select:focus, textarea:focus { border-color: var(--s-action); outline: none; box-shadow: 0 0 0 3px rgba(30, 75, 255, .18); }
input[disabled] { background: var(--s-ground); color: var(--s-ink-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--s-action); width: 16px; height: 16px; }
input[type=file] { font: inherit; font-size: .88rem; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.check input { margin-top: 3px; flex-shrink: 0; }
fieldset { border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 14px 16px; display: grid; gap: 12px; margin: 0; }
legend { font-weight: 600; padding: 0 6px; font-size: .9rem; }
.rules { margin: -4px 0 0; padding-left: 20px; font-size: .84rem; color: var(--s-ink-2); }
.rules li.met { color: var(--s-ok); }
.rules li.met::marker { content: "✓  "; }
.error { display: flex; gap: 10px; align-items: flex-start; background: var(--s-bad-soft); color: var(--s-bad-ink); border: 1px solid #F7C9C4; border-radius: var(--s-r-sm); padding: 11px 14px; margin-bottom: 16px; }
.error .ico { margin-top: 2px; }
.error p { margin: 0; }
.error p + p { margin-top: 4px; }
.flash { display: flex; gap: 10px; align-items: center; background: var(--s-ok-soft); color: var(--s-ok); border: 1px solid #BFE6D2; border-radius: var(--s-r-sm); padding: 11px 14px; font-weight: 500; }
.main > .flash { margin: 0 0 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--s-ink-3); font-size: .84rem; margin: 14px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--s-line); }
.search { display: flex; gap: 10px; margin: 0 0 18px; max-width: 600px; }

/* ---------- sign-in card ---------- */
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.card { background: var(--s-surface); border-radius: var(--s-r-lg); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); padding: 36px; }
.auth { width: 100%; max-width: 440px; }
.auth h1 { font-size: 1.45rem; }
.auth-logo { height: 40px; width: auto; margin-bottom: 18px; }
.center-foot { color: #C9D2EC; font-size: .84rem; margin-top: 18px; text-align: center; }
.center-foot a { color: var(--white); }

/* ---------- content ---------- */
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.head-row h1, .head-row h2 { margin: 0; }
.crumbs { font-size: .84rem; margin-bottom: 6px; color: var(--s-ink-3); }
.panel { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 22px 24px; margin: 18px 0; }
.panel > h2:first-child { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: .84rem; font-weight: 500; }
.soon ul { margin: 0; padding-left: 20px; color: var(--s-ink-2); }

/* figure tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 14px 0 18px; }
.tile { position: relative; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 16px 18px; color: var(--s-ink); text-decoration: none; display: flex; gap: 14px; align-items: flex-start; transition: border-color .12s, box-shadow .12s; }
a.tile:hover { border-color: var(--s-action); box-shadow: 0 6px 18px rgba(30, 75, 255, .10); color: var(--s-ink); }
.tile-ico { width: 40px; height: 40px; border-radius: var(--s-r-sm); background: var(--s-soft); color: var(--s-action-dark); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile-ico.bad { background: var(--s-bad-soft); color: var(--s-bad-ink); }
.tile-ico.warn { background: var(--s-warn-soft); color: var(--s-warn); }
.tile-ico.ok { background: var(--s-ok-soft); color: var(--s-ok); }
.tile-ico.licence { background: #FFF1E0; color: #A35200; }
.tile-body { display: grid; gap: 1px; min-width: 0; }
.tile strong { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-body > span { color: var(--s-ink-2); font-size: .84rem; font-weight: 500; }
.tile-note { font-size: .76rem; color: var(--s-ink-3); margin-top: 3px; }
.tile-note .up { color: var(--s-ok); font-weight: 600; }
.tile-note .down { color: var(--s-bad-ink); font-weight: 600; }
.tile > span:not(.tile-ico):not(.tile-body) { color: var(--s-ink-2); font-size: .84rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.card-sm { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 20px; }
a.card-link { color: var(--s-ink); text-decoration: none; display: block; transition: border-color .12s, box-shadow .12s; }
a.card-link:hover { border-color: var(--s-action); box-shadow: 0 6px 18px rgba(30, 75, 255, .10); }
a.card-link h2 { color: var(--s-action-ink); }

/* tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); overflow: hidden; display: block; overflow-x: auto; font-size: .9rem; }
.table th, .table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--s-line); vertical-align: top; }
.table th { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--s-ink-2); background: var(--s-head-bg); white-space: nowrap; }
.table tbody tr:hover td { background: var(--s-row-hover); }
.table tr:last-child td { border-bottom: 0; }
.table td a { font-weight: 500; }
.panel .table { border-radius: var(--s-r-sm); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.actions form { margin: 0; }
.danger { border-top: 1px solid var(--s-line); padding-top: 16px; display: grid; gap: 12px; max-width: 600px; }
.linkbox { background: var(--s-warn-soft); border: 1px solid #F6D9A8; border-radius: var(--s-r); padding: 16px 18px; margin: 0 0 18px; display: grid; gap: 10px; }
.linkbox p { margin: 0; }
.linkbox .copy { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.linkbox textarea.copy { resize: vertical; width: 100%; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 6px 0; border-bottom: 1px solid var(--s-line); }
.log span { color: var(--s-ink-3); font-size: .84rem; margin-right: 8px; }

h3.kind { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--s-ink-3); margin: 22px 0 10px; }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.files li { display: flex; gap: 16px; align-items: flex-start; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 14px 16px; }
.files .btn { flex-shrink: 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.row-actions { white-space: nowrap; }
.row-actions form { display: inline-flex; gap: 6px; align-items: center; margin: 0 8px 0 0; }
.row-actions label.check { gap: 4px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 18px; }
.facts dt { font-weight: 500; color: var(--s-ink-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
form.inline { display: flex; gap: 8px; margin: 0 0 14px; }
form.inline input { flex: 1; }
.key .head-row h2 { margin: 0; }
.req-actions { min-width: 230px; }
.req-actions form { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.req-actions input { flex: 1; min-width: 0; padding: 6px 10px; min-height: 34px; }

/* tabs and filters (the guidelines' segmented control) */
.filters { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 18px; padding: 3px; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px; }
.filters a { padding: 6px 14px; border-radius: 9px; text-decoration: none; color: var(--s-ink-2); font-weight: 500; font-size: .88rem; }
.filters a:hover { background: var(--s-ground); color: var(--s-ink); }
.filters a[aria-current] { background: var(--s-soft); color: var(--s-action-dark); font-weight: 600; }

/* support cases */
.thread { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.msg { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 14px 18px; }
.msg.staff { border-left: 4px solid var(--s-action); }
.msg.internal { background: var(--s-warn-soft); border-color: #F6D9A8; border-left: 4px solid #F28C28; }
.msg-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.msg p { margin: 6px 0; overflow-wrap: anywhere; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.case-grid .side { margin: 0; display: grid; gap: 14px; }
.close-form { margin-top: 10px; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } .two { grid-template-columns: 1fr; } }

/* ---------- charts and analytics ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--s-line); stroke-width: 1; }
.chart .axis { fill: var(--s-ink-3); font-size: 11px; font-family: inherit; }
.chart .area { fill: url(#chartFill); }
.chart .line { fill: none; stroke: var(--s-action); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .line2 { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.chart .dot { fill: var(--s-surface); stroke: var(--s-action); stroke-width: 2; }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: rgba(30, 75, 255, .06); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; font-size: .82rem; color: var(--s-ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 18px; height: 3px; border-radius: 3px; background: var(--s-action); display: inline-block; }
.legend i.l2 { background: repeating-linear-gradient(90deg, var(--cyan) 0 5px, transparent 5px 9px); }
.spark { width: 100%; height: 34px; display: block; margin-top: 8px; }
.spark path { fill: none; stroke: var(--s-action); stroke-width: 1.8; stroke-linejoin: round; }
.spark path.fill { fill: rgba(30, 75, 255, .08); stroke: none; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 18px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
.dash-grid > .panel, .dash-grid > div > .panel { margin-top: 0; }
@media (max-width: 1180px) { .dash-grid { grid-template-columns: 1fr; } }
.toplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toplist li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: .88rem; }
.toplist li svg.barbg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.toplist li svg.barbg rect { fill: var(--s-soft); }
.toplist li > span { position: relative; z-index: 1; }
.toplist .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.toplist .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.toplist .pct { font-variant-numeric: tabular-nums; color: var(--s-ink-3); font-size: .8rem; min-width: 38px; text-align: right; }

/* dashboard */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.hello h1 { margin: 0; }
.hello p { margin: 4px 0 0; color: var(--s-ink-2); }
.attention { display: grid; gap: 8px; margin: 18px 0; }
.attention a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--s-surface); border: 1px solid var(--s-line); border-left: 4px solid var(--s-warn); border-radius: var(--s-r-sm); color: var(--s-ink); text-decoration: none; font-weight: 500; }
.attention a.bad { border-left-color: var(--s-bad); }
.attention a.info { border-left-color: var(--s-action); }
.attention a:hover { border-color: var(--s-action); border-left-color: var(--s-action); }
.attention a .ico { color: var(--s-ink-3); }
.attention a .go { margin-left: auto; color: var(--s-action-ink); font-size: .84rem; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--s-line); font-size: .88rem; }
.feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.feed li:first-child { padding-top: 0; }
.feed .dotmark { width: 8px; height: 8px; border-radius: 50%; background: var(--s-action); margin-top: 7px; grid-row: span 2; }
.feed .dotmark.bad { background: var(--s-bad); }
.feed .dotmark.ok { background: var(--s-ok); }
.feed .dotmark.warn { background: var(--s-warn); }
.feed .when { color: var(--s-ink-3); font-size: .78rem; }
.feed a { font-weight: 500; }
.quick { display: grid; gap: 8px; }
.quick a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--s-line); border-radius: var(--s-r-sm); color: var(--s-ink); text-decoration: none; font-weight: 500; font-size: .9rem; }
.quick a .ico { color: var(--s-action-dark); }
.quick a:hover { border-color: var(--s-action); background: var(--s-ground); }

/* ---------- website editor ---------- */
details.block { border: 1px solid var(--s-line); border-radius: var(--s-r-sm); margin: 0 0 10px; background: var(--s-surface); }
details.block > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
details.block > summary .small { font-weight: 400; }
details.block[open] > summary { border-bottom: 1px solid var(--s-line); }
details.block > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.block > :last-child { margin-bottom: 16px; }
label.piece { margin-top: 12px; }
label.piece > span, p.piece > span { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--s-ink-3); }
p.piece { margin: 12px 0 0; }
p.piece > span { display: block; }
label.piece > small { display: block; color: var(--s-ink-3); font-weight: 400; }
.row-actions.sticky { position: sticky; bottom: 0; background: var(--s-ground); padding: 12px 0; border-top: 1px solid var(--s-line); z-index: 2; display: flex; gap: 10px; }
textarea.code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .84rem; line-height: 1.45; white-space: pre; overflow: auto; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.changes { margin: 0 0 1em; padding-left: 20px; }

@media (min-width: 641px) { .table { display: table; } }
@media (max-width: 640px) {
  .attention .go span { display: none; }
  .files li { flex-direction: column; gap: 8px; }
  .card { padding: 26px 20px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px; gap: 10px; flex-direction: column; }
  .tile-ico { width: 34px; height: 34px; }
  .tile strong { font-size: 1.35rem; }
  .panel { padding: 18px 16px; }
  h1 { font-size: 1.35rem; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Billing and revenue ---------- */
.r { text-align: right !important; font-variant-numeric: tabular-nums; }
.muted { color: var(--s-ink-3); }
.actions.tight { margin: 0; gap: 8px; }
.actions.tight .filters { margin: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.plain .muted { font-size: .84rem; }
.table small.sub { display: block; color: var(--s-ink-3); font-size: .78rem; }
.table tr.total td { font-weight: 700; background: var(--s-head-bg); }
.table tr.future td { color: var(--s-ink-2); }
.table.compact th, .table.compact td { padding: 7px 10px; }
.totals { display: flex; justify-content: flex-end; gap: 24px; margin: 12px 4px 0; font-size: .9rem; color: var(--s-ink-2); }
.totals strong { color: var(--s-ink); margin-left: 6px; font-variant-numeric: tabular-nums; }
.plan-sum { margin: 0; padding: 12px 16px; border-radius: var(--s-r-sm); background: var(--s-soft); color: var(--s-ink); font-weight: 500; }
.plan-sum:empty { display: none; }
.plan-sum strong { font-variant-numeric: tabular-nums; }
.danger-zone { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--s-line); max-width: 600px; }
.chart .bar { fill: var(--s-action); }
.chart .bar.current { fill: var(--s-action-dark, #1A3FE0); }
.chart .bar.future { fill: var(--s-action); fill-opacity: .28; }

/* The printable report (also how it looks on screen). */
.report-head { display: flex; align-items: center; gap: 22px; padding: 18px 0 16px; border-bottom: 3px solid var(--s-action); margin-bottom: 18px; }
.report-head h1 { margin: 0 0 2px; font-size: 1.5rem; }
.report-head p { margin: 0; color: var(--s-ink-2); font-size: .86rem; }
.report-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.report-figures div { border: 1px solid var(--s-line); border-radius: var(--s-r-sm); padding: 12px 14px; background: var(--s-surface); }
.report-figures span { display: block; font-size: .76rem; color: var(--s-ink-2); }
.report-figures strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.report-section { margin: 0 0 22px; }
.report-section h2 { font-size: 1.05rem; margin: 0 0 10px; }
.report-company { margin-bottom: 18px; break-inside: avoid; }
.report-company h3 { font-size: .95rem; margin: 0 0 8px; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .report-figures, .report-cols { grid-template-columns: 1fr 1fr; } }

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body, body.has-rail { background: #fff; padding-left: 0; font-size: 10.5pt; }
  .rail, .topbar, .foot, .scrim, .skip, .no-print, .flash { display: none !important; }
  .work, .main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .table { display: table; border-radius: 0; font-size: 9pt; }
  .table th, .table td { padding: 5px 8px; }
  .table tbody tr:hover td { background: none; }
  .table a { color: inherit; text-decoration: none; }
  .tag { border: 1px solid currentColor; }
  .report-section.break { break-before: page; }
  .report-section h2, .report-company h3 { break-after: avoid; }
  .report-figures { grid-template-columns: repeat(4, 1fr); }
  .report-cols { grid-template-columns: 1fr 1fr; }
  a[href]::after { content: none; }
  .table.months { table-layout: fixed; width: 100%; }
  .table.months th, .table.months td { padding: 4px 3px; font-size: 7.5pt; white-space: normal; }
}
.grid-2.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-2.pairs { grid-template-columns: 1fr; } }

/* ---------- Support cases ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.searchbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.searchbar label { display: block; }
.searchbar .grow { flex: 1 1 260px; }
.searchbar input[type=search] { width: 100%; }
.searchbar select { min-width: 150px; }
.cases-table tr.late td:first-child { box-shadow: inset 4px 0 0 var(--s-bad); }
.due { display: inline-flex; align-items: center; gap: 4px; color: var(--s-ink-2); }
.due.late { color: var(--s-bad-ink); font-weight: 600; }
.thread .event { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 14px; font-size: .84rem; color: var(--s-ink-2); }
.thread .event svg { color: var(--s-ink-3); }
.thread .event .small { color: var(--s-ink-3); }
.msg-head { align-items: center; }
.avatar.sm { width: 28px; height: 28px; font-size: .7rem; background: var(--s-ink-3); }
.avatar.sm.us { background: linear-gradient(135deg, var(--bright), var(--electric)); }
.msg-body { padding-left: 36px; }
.case-grid .side { display: grid; gap: 14px; }
.case-grid .side .panel { margin: 0; padding: 18px 20px; }
.case-grid .side h2 { font-size: 1rem; margin: 0 0 12px; }
.case-grid .side h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--s-ink-3); margin: 16px 0 8px; }
.case-grid .side .facts { grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.side-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.side-actions form { margin: 0; }
.client-card { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; }
.client-card .small { color: var(--s-ink-2); }
.reply-box .panel-head { margin-bottom: 10px; }
label.inline { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
label.inline select { min-height: 34px; padding: 4px 10px; }
.reply-opts { display: grid; gap: 8px; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary h2 { display: inline; margin: 0; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: '▸'; color: var(--s-ink-3); margin-right: 8px; }
details.panel[open] > summary::before { content: '▾'; }
details.panel[open] > summary { margin-bottom: 14px; }
.rate { display: flex; gap: 10px; flex-wrap: wrap; }
.rate label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--s-line-strong); border-radius: var(--s-r-sm); cursor: pointer; font-weight: 600; }
.rate label:has(input:checked) { border-color: var(--s-action); background: var(--s-soft); color: var(--s-action-dark); }
.templates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.templates li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--s-line); border-radius: var(--s-r-sm); }
.templates p { margin: 4px 0 0; white-space: pre-line; }
.printable .facts { grid-template-columns: max-content 1fr max-content 1fr; }
@media print { .thread .msg { break-inside: avoid; } .msg.staff { border-left-width: 3px; } }
label.inline { white-space: nowrap; }
label.inline select { width: auto; max-width: 260px; }
.case-grid .side p.small { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }