/* ==========================================================================
   MCIND CRM — Icon Rail
   Warm paper and ink, terracotta accent, 68px collapsible navigation rail.
   ========================================================================== */

/* The two faces are served from here, so no page asks Google for anything (it would pass on every
   visitor's IP address). Latin only, both under the SIL Open Font License. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 700;font-display:swap;
  src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Surfaces */
  --bg:#faf8f5;            /* warm paper */
  --card:#ffffff;
  --surface-2:#f5efe8;     /* hover / selected tint */
  --surface-3:#f2ece4;     /* inputs */

  /* Ink — checked against --bg: muted 5.9:1, faint 4.9:1 (and 4.5:1 on --surface-2).
     The mockup's lighter greys measured 2.4–2.6:1 and were unreadable. */
  --text:#1c1b19;
  --muted:#67605a;
  --faint:#746c62;

  /* Lines */
  --border:#ece6de;
  --border-strong:#e2dbd1;

  /* Accent */
  --accent:#c2410c;        /* terracotta */
  --accent-dark:#9a3412;
  --accent-soft:#fdf0e9;
  --chip:#f5efe8;

  /* Status */
  --success:#15803d;
  --danger:#b91c1c;
  --warning:#b45309;

  /* Rail */
  --rail:#1c1b19;
  --rail-dim:#a1978d;      /* 6.1:1 on the rail — these icons ARE the navigation */
  --rail-label:#8d857b;    /* 4.8:1 for the small group headings */
  --rail-text:#e4ded6;
  --rail-w:68px;
  --rail-w-open:236px;

  --font-display:'Bricolage Grotesque', Georgia, serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --info:#1d4ed8;
  --success-soft:#eaf7ef;
  --danger-soft:#fdf0ed;
  --warning-soft:#fdf3e7;
  --info-soft:#eef4fd;
  --label:#4f4a44;

  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}

/* ---------------------------------------------------------------- shell --- */

.app{display:flex;align-items:flex-start;min-height:100vh}

.rail{
  width:var(--rail-w);flex:none;position:sticky;top:0;height:100vh;
  background:var(--rail);color:var(--rail-text);
  display:flex;flex-direction:column;align-items:stretch;
  padding:14px 10px;gap:4px;
  transition:width .16s ease;
}
[data-rail="open"] .rail{width:var(--rail-w-open)}

.rail-top{display:flex;align-items:center;gap:10px;padding:0 4px 6px;min-height:40px}
.brand-mark{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-family:var(--font-display);font-size:15px;font-weight:700;
}
.rail-brand-name{
  font-family:var(--font-display);font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;
}
/* The expand/collapse control is a rail item in the footer, so it stays
   reachable in both states — hiding it when collapsed would strand the user. */
button.rail-item{
  background:none;border:0;width:100%;font-family:inherit;cursor:pointer;text-align:left;
}
.rail-toggle-ico{display:flex;flex:none}
.rail-toggle-ico svg{width:19px;height:19px}

.rail-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;padding-top:6px}
.rail-nav::-webkit-scrollbar{width:0}

.rail-group{display:flex;flex-direction:column;gap:2px}
.rail-group + .rail-group{margin-top:10px;padding-top:10px;border-top:1px solid rgba(250,248,245,.09)}
.rail-group-label{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rail-label);padding:2px 10px 4px;white-space:nowrap;overflow:hidden;
}

.rail-item{
  position:relative;display:flex;align-items:center;gap:12px;
  height:44px;padding:0 11px;border-radius:13px;
  color:var(--rail-dim);font-size:13.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;
  transition:background .12s ease,color .12s ease;
}
.rail-item svg{width:19px;height:19px;flex:none}
.rail-item:hover{background:rgba(250,248,245,.10);color:#fff}
.rail-item.active{background:var(--bg);color:var(--rail);font-weight:600}
.rail-item.active svg{color:var(--accent)}
.rail-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.rail-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rail-count{font-size:11.5px;color:var(--rail-dim);font-variant-numeric:tabular-nums}
.rail-item.active .rail-count{color:var(--muted)}

/* Collapsed: hide text, centre the glyph, show a hover label instead */
[data-rail="collapsed"] .rail-item{justify-content:center;padding:0}
/* Collapsed: hide the text VISUALLY but keep it in the accessibility tree.
   display:none removed these from the a11y tree, leaving nine unnamed links. */
[data-rail="collapsed"] .rail-label,
[data-rail="collapsed"] .rail-group-label,
[data-rail="collapsed"] .rail-brand-name,
[data-rail="collapsed"] .rail-account .acct-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
[data-rail="collapsed"] .rail-count{display:none}
[data-rail="collapsed"] .rail-top{justify-content:center;padding-bottom:6px}

/* The rail scrolls, so an absolutely-positioned tooltip inside an item would be
   clipped by that scroll container. One fixed-position element outside the rail
   escapes the clipping; JS moves it to the hovered item. */
.rail-tip-float{
  position:fixed;z-index:200;pointer-events:none;
  background:var(--rail);color:#fff;font-size:12.5px;font-weight:500;line-height:1;
  padding:9px 12px;border-radius:9px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(28,27,25,.32);
  opacity:0;visibility:hidden;transform:translateY(-50%) translateX(-4px);
  transition:opacity .12s ease,transform .12s ease;
}
.rail-tip-float.show{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.rail-tip-float::before{
  content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:var(--rail);
}

/* A count that still needs to be visible when the rail is narrow */
.rail-dot{
  position:absolute;top:6px;right:6px;min-width:19px;height:19px;padding:0 4px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1;
  border:2px solid var(--rail);
}
[data-rail="open"] .rail-dot{position:static;border:0;margin-left:auto}
.rail-item.active .rail-dot{border-color:var(--bg)}

.rail-foot{padding-top:8px;border-top:1px solid rgba(250,248,245,.09);display:flex;flex-direction:column;gap:2px}
.rail-account{
  display:flex;align-items:center;gap:11px;height:46px;padding:0 8px;border-radius:13px;
  background:none;border:0;color:var(--rail-text);cursor:pointer;width:100%;text-align:left;
  font-family:inherit;font-size:13px;overflow:hidden;
}
.rail-account:hover{background:rgba(250,248,245,.10)}
[data-rail="collapsed"] .rail-account{justify-content:center;padding:0}
[data-rail="collapsed"] .rail-account .caret{display:none}
.avatar{
  width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
}
.acct-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;min-width:0}
.acct-name{font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.acct-role{font-size:11px;color:var(--rail-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.rail-account .caret{width:14px;height:14px;color:var(--rail-dim);margin-left:auto;flex:none}

/* ------------------------------------------------------------- app bar --- */

.main{flex:1;min-width:0;padding:0 20px 72px}   /* the last row can always scroll clear of the "Found something?" pill */

.appbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;
  background:rgba(250,248,245,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  margin:0 -20px 14px;padding:0 20px;min-height:54px;
}

.crumbs{display:flex;align-items:baseline;gap:9px;min-width:0}
.crumb-root{font-size:12.5px;color:var(--faint);white-space:nowrap}
.crumb-sep{font-size:12.5px;color:#ccc3b8}
.crumb-page{margin:0;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.appbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Search */
.search{position:relative;width:290px;flex:none}
.search form{position:relative;display:block}
.search input[type=search]{
  width:100%;height:38px;padding:0 42px 0 34px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--surface-3);font-size:13px;font-family:inherit;color:var(--text);
}
.search input[type=search]::placeholder{color:var(--muted)}
.search input[type=search]:focus{outline:none;background:var(--card);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none;display:flex}
.search-ico svg{width:15px;height:15px}
.search-kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:600;color:var(--faint);pointer-events:none;font-family:inherit;
}
.search-panel{left:0;right:auto;width:400px;max-height:70vh;overflow:auto;padding:6px}
.search-group{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.search-item{display:flex;gap:11px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--text)}
.search-item:hover,.search-item.active{background:var(--surface-2)}
.search-item svg{width:16px;height:16px;color:var(--faint);flex:none}
.search-item .t{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.search-item .m{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.search-item mark{background:#fbe3d5;color:inherit;border-radius:3px}
.search-foot{border-top:1px solid var(--border);margin-top:6px;padding:9px 10px;font-size:12.5px}
.search-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);color:var(--text)}
.search-row:last-child{border-bottom:0}
.search-row-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.search-row-icon svg{width:17px;height:17px;color:var(--accent)}

/* Clock */
.clock{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;padding:0 2px}
.clock strong{font-weight:600;font-variant-numeric:tabular-nums}
.clock-date{font-size:11px;font-weight:500;color:var(--faint)}

/* Buttons in the bar */
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border:0;border-radius:var(--radius-sm);
  background:var(--surface-3);color:var(--label);cursor:pointer;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .dot{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1;
  border-radius:999px;border:2px solid var(--bg);
}
.btn-primary-action{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;flex:none;
  border:0;border-radius:var(--radius-sm);background:var(--text);color:#fff;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.btn-primary-action:hover{background:#000}
.btn-primary-action svg{width:15px;height:15px}

/* Dropdowns */
.menu-wrap{position:relative}
.dropdown{
  display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  min-width:288px;max-width:min(380px,90vw);
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 18px 44px rgba(28,27,25,.16);overflow:hidden;
}
.dropdown.show{display:block}
.dropdown-up{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
.dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg)}
.dropdown-head strong{font-family:var(--font-display);font-size:13.5px}
.dropdown-item{display:block;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);font-size:13.5px}
.dropdown-item:last-child{border-bottom:0}
.dropdown-item:hover{background:var(--bg)}
.dropdown-item span{display:block}
.dropdown-item.row-item{display:flex;align-items:center;gap:10px}
.dropdown-item.row-item svg{width:16px;height:16px;color:var(--faint);flex:none}
.dropdown-item.danger{color:var(--danger)}
.dropdown-item.danger svg{color:var(--danger)}
.dropdown-empty{padding:18px 14px;color:var(--muted);font-size:13px;text-align:center}
.tiny{font-size:11.5px}
.linkish{background:none;border:0;color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer;padding:0;width:auto;font-family:inherit}
.linkish:hover{text-decoration:underline}

.nav-scrim{position:fixed;inset:0;background:rgba(28,27,25,.45);z-index:80;display:none}
.nav-scrim.show{display:block}
.only-mobile{display:none !important}

/* --------------------------------------------------------------- page --- */

.page-head{margin:0 0 12px}
.page-head p{margin:0;color:var(--muted);font-size:12.5px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card h2{margin:0 0 8px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px;align-items:start}
.grid-2 > .card,.grid-3 > .card,.grid > .card{margin-bottom:0}
.metric{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:17px}
.metric span{display:block;color:var(--muted);font-size:12.5px}
.metric strong{font-family:var(--font-display);font-size:24px;font-weight:700;display:block;margin-top:4px;letter-spacing:-.025em}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:transparent}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px}
th{color:var(--muted);background:var(--bg);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;padding:7px 12px;font-weight:600;font-size:13px;
  cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--accent-dark)}
/* A white face and a hairline, so a secondary button reads as a button on any surface. */
.btn.secondary{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#991b1b}
.btn.small{padding:5px 9px;font-size:12px;border-radius:8px}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--faint);cursor:not-allowed}
.btn svg{width:15px;height:15px;margin-right:6px}

.field{margin-bottom:10px}
label{display:block;font-size:12px;font-weight:600;margin-bottom:4px;color:var(--label)}
input,select,textarea{
  width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:7px 10px;
  background:var(--card);font-size:13px;font-family:inherit;color:var(--text);
}
/* One focus ring for everything the keyboard reaches; fields keep their own glow below. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none}
/* Whatever the keyboard lands on stops short of the sticky bar above and the pill below. */
html{scroll-padding-top:64px;scroll-padding-bottom:72px}
html:has(.lead-table){scroll-padding-top:100px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:64px;resize:vertical}
.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row > .field:last-child,.row > .field:only-child{margin-bottom:12px}

/* Compact forms — table cells, modals — often stack bare controls with no
   .field wrapper. Without this they butt together with no gap at all. */
form > input:not([type="hidden"]),
form > select,
form > textarea{margin-bottom:9px}
form > .btn,form > button.btn{margin-top:2px}
form > *:last-child{margin-bottom:0}

/* In-cell forms wrap horizontally rather than stacking: a five-control update
   form stacked vertically made every lead row ~330px tall. */
td form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:200px}
td form > input,td form > select,td form > textarea{margin-bottom:0;flex:1 1 132px;min-width:112px;width:auto}
td form > input[type="date"],td form > input[type="datetime-local"]{flex:1 1 168px}
td form > textarea{flex:1 1 100%;min-height:60px}
td form > .btn{align-self:center;margin-top:0;flex:none}
td form + form{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
td .form-actions{margin-top:0}

.form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}

/* A grid cell holding a button instead of a field — sits on the same baseline
   as the inputs beside it. */
.field-action{display:flex;align-items:flex-end}
.field-action .btn{width:100%;justify-content:center}

/* Checkbox / radio groups. Replaces per-label inline margins so the rows wrap
   evenly instead of drifting. */
input[type="checkbox"],input[type="radio"]{width:auto;margin:0;flex:none}
.checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin:2px 0 14px}
.check{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;color:var(--text);cursor:pointer}
.check input{cursor:pointer}

hr{border:0;border-top:1px solid var(--border);margin:18px 0}

.alert{padding:9px 12px;border-radius:10px;margin-bottom:12px;border:1px solid var(--border);background:var(--card);font-size:13px}
.alert.success{border-color:#bbe7c9;background:#f0fbf3;color:#14532d}
.alert.error{border-color:#f3ccc4;background:#fdf5f3;color:#8c2d10}

.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.green{background:var(--success-soft);color:var(--success)}
.badge.red{background:var(--danger-soft);color:var(--danger)}
.badge.orange{background:var(--warning-soft);color:var(--warning)}
.badge.blue{background:var(--info-soft);color:var(--info)}

/* Lead import preview: filter chips, the rows table, notes by outcome. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;width:auto;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--card);padding:5px 10px;font:600 12px/1.2 var(--font-body);color:var(--text);cursor:pointer;
}
.chip:hover{background:var(--surface-2)}
.chip .n{color:var(--muted);font-weight:600}
.chip.on{background:var(--text);border-color:var(--text);color:#fff}
.chip.on .n{color:#d6cfc6}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
fieldset.bare{border:0;margin:0;padding:0;min-width:0}
.import-map{margin:14px 0 0;line-height:1.75}
.import-map b{color:var(--text);font-weight:600}
.import-table tr[hidden]{display:none}
.import-table td{vertical-align:middle}
.import-table tr.group-row td{background:var(--bg);color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 11px}
.import-table select{width:auto;min-width:200px;padding:6px 8px;font-size:12.5px}
.cell-from{display:block;margin-top:2px;font-size:11.5px;color:var(--faint)}
.note-bad{color:var(--danger);font-weight:600}
.note-warn{color:var(--warning)}
.note-ok{color:var(--success);font-weight:600}
/* A password box with an eye on the end. */
.pw{position:relative;display:block}
.pw input{padding-right:40px}
.pw-eye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);display:grid;place-items:center;
  width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;
}
.pw-eye:hover{background:var(--surface-2);color:var(--text)}
.pw-eye.on{color:var(--accent)}
.pw-eye svg{width:17px;height:17px}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* File picking, in the app's own clothes rather than the browser's. The real
   input covers the label, so a click anywhere on it opens the chooser, and a
   file can be dropped on it. */
.filepick{
  position:relative;display:inline-flex;align-items:center;gap:9px;min-width:236px;
  padding:9px 13px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:var(--card);font-size:12.5px;color:var(--muted);cursor:pointer;
  transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.filepick:hover,.filepick.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.filepick:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.filepick input[type="file"]{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0;cursor:pointer}
.filepick svg{width:16px;height:16px;flex:none;color:var(--accent)}
.filepick strong{color:var(--text);font-weight:600}
.filepick.busy{opacity:.6;pointer-events:none}

/* The page a student opens from the link their counsellor sent. No rail, no
   header — just their own documents on a plain centred column. */
.public{max-width:780px;margin:0 auto;padding:26px 20px 40px}
.public h1{font-size:24px}
.public-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:22px}
.public-head strong{font-family:var(--font-display);font-size:17px}
.doc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.doc-row:last-of-type{border-bottom:0}
.doc-name{flex:1 1 260px;font-size:13.5px;line-height:1.6}
.doc-name .badge{margin-left:6px}
.req{color:var(--danger);font-weight:700;margin-left:3px;cursor:help}
.doc-form{display:flex;align-items:center;gap:8px;flex:0 1 auto}
.doc-form input[type="file"]{width:auto;max-width:230px;font-size:12.5px;padding:6px 8px;margin-bottom:0}
.doc-form .btn{flex:none}
.doc-done{flex:0 0 auto;font-size:12.5px}
/* One file among several under the same document, on the counsellor's side. */
.doc-file{padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.doc-file:last-child{border-bottom:0}
.doc-file .badge{margin-left:6px}
.doc-file .muted{font-size:12px}
.doc-file form{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.doc-file form input{flex:1 1 150px;margin-bottom:0}
/* With the page script running, choosing a file sends it, so the button goes. */
.doc-form.auto .btn{display:none}
.doc-form.auto input[type="file"]{max-width:280px}

/* The counsellor's board: one column per call response, cards dragged between them. */
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:12px}
.kcol{flex:0 0 288px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px}
.kcol.over{border-color:var(--accent);background:var(--accent-soft)}
.kcol-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px}
.kcol-head strong{font-family:var(--font-display);font-size:13.5px}
.kcol-body{display:flex;flex-direction:column;gap:10px;min-height:90px}
.kcard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px;cursor:grab}
.kcard:active{cursor:grabbing}
.kcard.dragging{opacity:.45}
.kcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px}
.kmeta{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.45}
.kmeta.kdue{color:var(--danger);font-weight:600}
.kmeta.knote{color:var(--faint);font-style:italic}
.lead-open{font-weight:600;color:var(--accent);text-decoration:none}
.lead-open:hover{text-decoration:underline}
/* A lead opened in full: its heading, and preferences kept in the order they were given. */
.lead-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.lead-head h2{margin:0}
.lead-badges{display:flex;flex-wrap:wrap;gap:6px}
/* In the lead window the window is the card: no second box drawn inside it. */
[data-lead-host] form.card{border:0;border-radius:0;padding:0;margin:0;background:none}
.pref{min-width:0}
.pref-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.pref-row input{flex:1;min-width:0}
.pref-n{
  flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;
}
.pref-btn{
  flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;
  border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--muted);cursor:pointer;
}
.pref-btn:hover{background:var(--surface-2);color:var(--text)}
.pref-btn svg{width:14px;height:14px}
.pref [data-pref-add]{margin-top:2px}
/* A row edited where it sits: the boxes appear only once the pencil is pressed.
   Without the page script both halves show, and the row still saves. */
[data-js="on"] [data-edit-row]:not(.editing) [data-edit]{display:none!important}
[data-js="on"] [data-edit-row].editing [data-view]{display:none!important}
[data-edit-row].editing{background:var(--surface-2)}
[data-edit-row] input,[data-edit-row] select{max-width:100%}
td.row-actions{white-space:nowrap}
td.row-actions .inline-form{vertical-align:middle}
th.row-actions-head{width:1%}
.icon-btn{
  display:inline-grid;place-items:center;width:30px;height:30px;padding:0;vertical-align:middle;
  border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--muted);cursor:pointer;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.icon-btn svg{width:15px;height:15px}
.icon-btn + .icon-btn,.icon-btn + form,form + .icon-btn{margin-left:4px}

/* Small forms that live inside a table cell, and the row a removal sits on. */
.inline-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.inline-form + .inline-form,.inline-form + form{margin-top:6px}
.inline-form input[name="course_name"]{min-width:150px}
.danger-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.kmove{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--border)}
.kmove select,.kmove input{flex:1 1 100%;width:auto;padding:6px 8px;font-size:12.5px;margin-bottom:0}
.kmove .btn{flex:none;margin-top:0}
@media (max-width:900px){.kcol{flex:0 0 84vw}}

/* A multi-choice dropdown (roles). Without the page script it is the plain
   checkbox row it replaced, so the field still works with JavaScript off. */
.picker{position:relative;margin:2px 0 14px}
.picker-btn{display:none}
.picker.ready .picker-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);
  padding:9px 11px;font-family:inherit;font-size:13.5px;color:var(--text);text-align:left;cursor:pointer;
}
.picker.ready .picker-btn:hover{background:var(--surface-2)}
.picker.ready .picker-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.picker-caret{color:var(--muted);font-size:11px}
.picker-menu{display:flex;flex-wrap:wrap;gap:10px 20px}
.picker.ready .picker-menu{
  display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:70;flex-direction:column;flex-wrap:nowrap;gap:0;
  min-width:250px;max-width:min(340px,90vw);padding:6px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 44px rgba(28,27,25,.16);
}
.picker.ready.open .picker-menu{display:flex}
.picker.ready .picker-menu .check{padding:8px 10px;border-radius:8px}
.picker.ready .picker-menu .check:hover{background:var(--bg)}
.picker.ready [data-picker-label].on{font-weight:600}
/* The head of the menu: a search box, select all, clear, and how many are ticked. */
.picker-head{display:none}
.picker.ready .picker-head{display:block;padding:4px 4px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.picker-search{width:100%;margin-bottom:6px}
.picker-tools{display:flex;align-items:center;gap:10px;padding:0 6px}
.picker-link{
  border:0;background:none;padding:0;font-family:inherit;font-size:12px;font-weight:600;
  color:var(--accent);cursor:pointer;
}
.picker-link:hover{text-decoration:underline}
.picker-count{margin-left:auto;font-size:11.5px;color:var(--muted)}
.picker-list{display:flex;flex-direction:column;gap:0}
.picker.ready .picker-list{max-height:min(320px,50vh);overflow:auto}
.picker-none{display:none}
.picker.ready .picker-none{display:block;margin:6px 10px;font-size:12.5px}
/* .check sets its own display, which would otherwise beat the browser's [hidden]. */
.picker [data-picker-option][hidden],.picker .picker-none[hidden]{display:none}
/* Open upwards when there is no room below. */
.picker.ready.up .picker-menu{top:auto;bottom:calc(100% + 6px)}
.picker.ready .picker-menu .check span{overflow:hidden;text-overflow:ellipsis}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-badge{background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 7px;min-width:20px;text-align:center;line-height:1.4}

.muted{color:var(--muted);font-size:12.5px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.tab{padding:7px 13px;border-radius:999px;background:var(--surface-2);color:var(--label);font-weight:600;font-size:13px}
.tab:hover{background:var(--border)}
.tab.active{background:var(--text);color:#fff}

.modal{position:fixed;inset:0;background:rgba(28,27,25,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:99}
.modal.show{display:flex}
.modal-card{background:var(--card);border-radius:20px;max-width:760px;width:100%;max-height:86vh;overflow:auto;padding:22px}
.modal-card .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.modal-card .topbar h2{margin:0}
.modal-card .topbar h2:focus{outline:none}
.modal-card .topbar h2:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Phones: the window takes the width, so a box beside three 44px buttons still fits a real name. */
@media (max-width:640px){
  .modal{padding:8px}
  .modal-card{padding:16px;border-radius:16px;max-height:calc(100vh - 16px)}
  .pref-row{gap:4px}
}

.split{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.timeline{border-left:2px solid var(--border-strong);padding-left:16px}
.timeline-item{margin:0 0 16px}
.permission-note{background:#fdf7f0;border:1px solid #f0e0cd;padding:11px 13px;border-radius:12px;color:#8a5a2b;font-size:12.5px}
.hidden{display:none!important}

/* -------------------------------------------------------------- login --- */

.login{max-width:400px;margin:12vh auto;padding:0 20px}
.login .brand-big{
  text-align:center;font-family:var(--font-display);font-size:30px;font-weight:700;
  margin-bottom:20px;letter-spacing:-.02em;
}
.login .card{padding:24px;border-radius:18px}

/* ------------------------------------------------------------ responsive - */

@media(max-width:900px){
  .rail{
    position:fixed;left:0;top:0;height:100vh;width:var(--rail-w-open);z-index:90;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .rail.open{transform:translateX(0)}
  /* Off-canvas always shows labels, whatever the desktop preference is */
  .rail .rail-label,.rail .rail-count,.rail .rail-group-label,.rail .rail-brand-name,
  .rail .acct-text,.rail .caret{display:revert}
  .rail .rail-item{justify-content:flex-start;padding:0 11px}
  .rail .rail-account{justify-content:flex-start;padding:0 8px}
  .rail-tip{display:none}
  .only-mobile{display:inline-flex !important}
  .main{padding:0 16px 16px;width:100%}
  .appbar{margin:0 -16px 16px;padding:0 16px}
  /* Tight budget at 375px: shrink the bar's own spacing and the search box so
     the page title has room, rather than letting it ellipsis to "Dashb…". */
  .appbar{gap:10px}
  .appbar-right{gap:8px}
  .crumbs{flex:1 1 auto;min-width:0}
  .crumb-page{font-size:15px}
  .search{width:auto;flex:0 1 108px;min-width:0}
  .clock,.crumb-root,.crumb-sep{display:none}
  .grid,.grid-2,.grid-3,.row,.split{grid-template-columns:1fr}
  .grid-2 > .card,.grid-3 > .card{margin-bottom:0}
  .btn-primary-action span{display:none}
  .btn-primary-action{padding:0 12px}
}
@media(max-width:560px){
  .search-kbd{display:none}
  .search-panel{width:min(400px,calc(100vw - 32px))}
}

/* Thin top progress bar shown while a page swap is in flight. */
.route-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  background:var(--accent);opacity:0;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .25s ease,opacity .2s ease;
}
.route-progress.on{transform:scaleX(.82);opacity:1;transition:transform 1.4s cubic-bezier(.1,.6,.3,1),opacity .1s}

/* Phone number: country dialling code welded to the number box. */
.phone-group{display:flex;align-items:stretch}
.phone-group select{
  width:auto;flex:none;max-width:132px;
  border-top-right-radius:0;border-bottom-right-radius:0;border-right-color:transparent;
  background:var(--surface-3);
}
.phone-group input{border-top-left-radius:0;border-bottom-left-radius:0;min-width:0;flex:1}
.phone-group select:focus{position:relative;z-index:1;border-right-color:var(--accent)}
@media(max-width:560px){ .phone-group select{max-width:104px} }

/* While a page is loading, dim the old content so the click visibly registered. */
.is-loading #pageContent{opacity:.55;transition:opacity .12s ease;pointer-events:none}

/* ---------------------------------------------------- university applications ---- */
/* One card per application: what it is, where it stands, what happens next, and its history. */
.add-app > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.add-app > summary::-webkit-details-marker{display:none}
.add-app > summary h2{margin:0}
.add-app > summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;font-weight:700}
.add-app[open] > summary{margin-bottom:14px}
.add-app[open] > summary::before{content:"−"}
.picker-sub{display:block;color:var(--muted);font-size:11px}
[data-app-form] .picker.ready .picker-sub{display:none}
.picker.ready .picker-btn:disabled{opacity:.55;cursor:not-allowed}

.app-card{scroll-margin-top:84px}
.app-card.is-closed{opacity:.72}
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.app-head h3{margin:0 0 2px;font-size:16px}
.app-head h3 a{color:inherit;text-decoration:none}
.app-head h3 a:hover{color:var(--accent)}
.app-head p{margin:0}
.app-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin:0 0 12px}
.app-facts div{min-width:0}
.app-facts dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.app-facts dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.due{color:var(--danger);font-weight:600}
.app-note{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px}
.app-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.app-actions:empty{display:none}
.app-panel{flex-basis:auto}
.app-panel > summary{list-style:none}
.app-panel > summary::-webkit-details-marker{display:none}
.app-panel[open]{flex-basis:100%;order:10;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.app-panel[open] > summary{margin-bottom:12px}
.app-history{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.app-history > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.app-history[open] > summary{margin-bottom:10px}
.app-timeline{list-style:none;margin:0 0 12px;padding:0}
.app-timeline li{display:grid;grid-template-columns:96px 1fr auto;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px}
.app-timeline li:last-child{border-bottom:0}
.t-when{color:var(--muted);font-size:12px}
.t-who{font-size:12px;text-align:right}
.app-timeline .t-comment .t-what strong{color:var(--accent)}
.app-comment .row{align-items:end}
@media (max-width:640px){
  .app-timeline li{grid-template-columns:1fr}
  .t-who{text-align:left}
}

/* What the university said last, set out on the card in its own colour. */
.app-response{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card)}
.app-response p{margin:6px 0 0;font-size:13.5px}
.app-response-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.app-response.tone-green{border-color:color-mix(in srgb,var(--success) 30%,var(--border));background:color-mix(in srgb,var(--success-soft) 60%,var(--card))}
.app-response.tone-red{border-color:color-mix(in srgb,var(--danger) 30%,var(--border));background:color-mix(in srgb,var(--danger-soft) 60%,var(--card))}
.app-response.tone-orange{border-color:color-mix(in srgb,var(--warning) 30%,var(--border));background:color-mix(in srgb,var(--warning-soft) 60%,var(--card))}
.app-response.tone-blue{border-color:color-mix(in srgb,var(--info) 30%,var(--border));background:color-mix(in srgb,var(--info-soft) 60%,var(--card))}
.app-timeline .tone-green .t-what strong{color:var(--success)}
.app-timeline .tone-red .t-what strong{color:var(--danger)}
.app-timeline .tone-orange .t-what strong{color:var(--warning)}
.app-timeline .tone-blue .t-what strong{color:var(--info)}
/* Only the fields the chosen answer needs. Without the script every field shows. */
[data-js="on"] [data-response-form] [data-when]:not(.on){display:none}
.filepick.has-file{border-style:solid;border-color:var(--accent)}
.filepick.has-file .filepick-text{color:var(--text);font-weight:600}

/* What the university asked for: outstanding first, done folded away. */
.app-requests{margin:0 0 12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.app-requests h4{margin:0 0 8px;font-size:13px;letter-spacing:.02em}
.req-list{list-style:none;margin:0;padding:0}
.req{padding:10px 0;border-top:1px dashed var(--border)}
.req:first-child{border-top:0;padding-top:2px}
.req-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13.5px}
.req-note{margin:6px 0 0;font-size:12.5px}
.req-open .req-note:not(.muted){color:var(--warning);font-weight:600}
.req-files{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.req-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.req-actions .filepick{min-height:0;padding:6px 10px}
.req-more > summary{list-style:none}
.req-more > summary::-webkit-details-marker{display:none}
.req-more[open]{flex-basis:100%}
.req-more[open] > summary{margin-bottom:6px}
.req-more input{min-width:220px}
.req-done{margin-top:8px}
.req-done > summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:600}
.req-resolved .req-head strong,.req-cancelled .req-head strong{font-weight:500;color:var(--muted)}
.req-count{font-size:11.5px;color:var(--muted)}
.req-count.to-send{color:var(--info);font-weight:600}

/* The student's decision on an offer, and the one university the CAS path follows. */
.app-decision{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.app-decision-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.app-decision-form{margin-left:auto}
.app-card.is-selected{border-color:var(--success);box-shadow:0 0 0 1px var(--success) inset}
.selected-flag{margin:-4px 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--success);text-transform:uppercase}
.plans-dropped{border-color:var(--danger);background:#fdf7f5}
.plans-dropped p{margin:6px 0}
.drop-plans > summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted)}
.drop-plans[open] > summary{margin-bottom:10px}
a.badge{text-decoration:none}

/* Money a university asked for, and the interview it set. */
.money-group{display:flex}
.money-group select{flex:none;width:auto;border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;background:var(--surface-2)}
.money-group input{flex:1;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
.pay-amount{font-weight:700;font-variant-numeric:tabular-nums}
.pay-confirmed .req-head strong,.pay-cancelled .req-head strong{font-weight:500;color:var(--muted)}
.pay-cancelled .pay-amount{text-decoration:line-through;color:var(--muted)}
.app-decision-form select,.app-decision-form input{width:auto;min-width:0}
.app-decision-form input{max-width:220px}
.req-actions .inline-form select,.req-actions .inline-form input{width:auto}

/* The CAS path, on the selected university's card. */
.app-cas{border-color:var(--success)}
.app-cas h4{display:flex;align-items:center;gap:8px}
.app-cas .app-requests{border:0;padding:0;margin:10px 0 0;background:none}

/* On this Mac only: who is signed in, and a way to switch. */
.local-as{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--card)7e6;
  border:1px solid #f1d9a8;color:#7a4b00;font-size:12.5px;text-decoration:none;white-space:nowrap}
.local-as strong{color:#4a2e00}
.local-as-switch{padding:3px 9px;border-radius:999px;background:#7a4b00;color:#fff;font-weight:600;font-size:11.5px}
.local-as:hover .local-as-switch{background:#4a2e00}
.local-as-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* The page's own name always wins the space: the pill gives way a piece at a time. */
.crumbs{flex-shrink:0}
@media (max-width:1320px){ .local-as-role{display:none} }
@media (max-width:1180px){ .local-as-lead{display:none} }
@media (max-width:960px){ .local-as-text{display:none} .local-as{padding:4px} }

/* The Applications page's filters, grouped the way an application moves. */
.chip-groups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 22px;margin:0 0 10px}
.chip-group{min-width:0}
.chip-group-label{display:block;margin:0 0 6px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chip-group .chips{gap:6px}
.chip.zero{color:var(--muted);background:var(--bg);border-color:var(--border)}
.chip.zero .n{color:var(--muted)}
.chip.zero:hover{color:var(--text);border-color:var(--border-strong)}

/* ---- "Found something?" reporter ---- */
.bug-pill{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font:600 13px/1 var(--font-body);box-shadow:0 6px 20px rgba(28,27,25,.14);cursor:pointer;touch-action:none;user-select:none}
.bug-pill:hover{background:var(--surface-2)}
.bug-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bug-pill[hidden]{display:none}
@media (max-width:900px){.bug-pill{display:none}}
[data-js="on"] .bug-plain{display:none}
.bug-card{max-width:460px;padding:18px}
.bug-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.bug-tabs{display:flex;gap:6px}
.bug-tab{border:0;background:transparent;padding:8px 14px;border-radius:10px;font:600 14px var(--font-body);color:var(--muted);cursor:pointer}
.bug-tab.on{background:var(--surface-2);color:var(--text)}
.bug-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.bug-x:hover{background:var(--surface-2);color:var(--text)}
.bug-label{display:block;font-size:12px;font-weight:600;margin-bottom:4px;color:var(--label)}
.bug-opt{font-weight:400;color:var(--faint)}
.bug-seg,.bug-prio{display:grid;gap:8px}
.bug-seg{grid-template-columns:repeat(3,1fr);margin-bottom:12px}
.bug-prio{grid-template-columns:repeat(4,1fr)}
.bug-seg-btn,.bug-prio-btn{position:relative;margin:0;cursor:pointer}
.bug-seg-btn input,.bug-prio-btn input{position:absolute;opacity:0;width:1px;height:1px}
.bug-seg-btn > span,.bug-prio-btn > span{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:1px solid var(--border-strong);border-radius:12px;background:var(--card);font-weight:600;font-size:13.5px;color:var(--text)}
.bug-seg-btn input:checked + span{border-color:var(--success);background:var(--success-soft);color:#14532d}
.bug-prio-btn input:checked + span{background:var(--text);border-color:var(--text);color:#fff}
.bug-seg-btn input:focus-visible + span,.bug-prio-btn input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.bug-shots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.bug-shot-add{width:72px;height:72px;border:1.5px dashed var(--border-strong);border-radius:12px;background:var(--surface-3);font-size:24px;color:var(--muted);cursor:pointer}
.bug-shot-add[hidden]{display:none}
.bug-thumb{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.bug-thumb img,.bug-thumb video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.bug-thumb-x{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(28,27,25,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer}
[data-bug-record][hidden]{display:none}
.bug-hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.bug-note{font-size:12.5px;color:var(--danger);margin:6px 0 0}
.bug-note[hidden]{display:none}
.bug-send{width:100%;justify-content:center;margin-top:6px}
.bug-mine .card{border:0;padding:0;margin:0 0 10px}
.bug-recbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--text);color:#fff;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bug-recbar[hidden]{display:none}
.bug-recdot{width:9px;height:9px;border-radius:50%;background:#ef4444;animation:bugpulse 1s infinite}
@keyframes bugpulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.bug-recdot{animation:none}.rail{transition:none}.route-progress,.route-progress.on{transition:opacity .15s}}
@media (max-width:560px){.bug-card{padding:14px}.bug-seg-btn > span,.bug-prio-btn > span{padding:9px 4px;font-size:13px}.bug-card input,.bug-card textarea{font-size:16px}}
/* a report's own page */
.bug-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bug-title h2{margin:0}
.bug-details{margin:10px 0 0}
.bug-files{display:flex;flex-wrap:wrap;gap:12px}
.bug-files img{max-width:320px;max-height:220px;border-radius:10px;border:1px solid var(--border);display:block}
.bug-files video{max-width:100%;width:480px;border-radius:10px;background:#000}
.bug-ctx{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:13px}
.bug-ctx dt{color:var(--muted);font-weight:600}
.bug-ctx dd{margin:0;word-break:break-word}
.bug-ctx pre{margin:0;white-space:pre-wrap;font-size:12px}
.bug-reply{padding:10px 0;border-bottom:1px solid var(--border)}
.bug-reply p{margin:4px 0 0}
.bug-reply.from-team strong{color:var(--accent-dark)}

/* ---- Leads: tabs and bulk assign ---- */
.lead-tabs .chip{white-space:nowrap}
.lead-tabs .chip-group-label{white-space:nowrap}
@media (max-width:640px){.lead-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.lead-tabs .chip-group{flex:none}.lead-tabs .chips{flex-wrap:nowrap}}
.pick-col{width:34px;padding-right:0}
.pick-col input{width:16px;height:16px;cursor:pointer}
.bulk-bar{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:12px 0 16px;padding:10px 14px;border:1px solid var(--border-strong);border-radius:14px;background:var(--card);box-shadow:0 8px 24px rgba(28,27,25,.12)}
[data-js="on"] .bulk-bar:not(.has-picks){display:none}
.bulk-count{font-size:13.5px;margin-right:4px}
.bulk-part{display:inline-flex;align-items:center;gap:6px}
.bulk-bar select{width:auto;min-width:180px}
.bulk-bar .picker{min-width:180px}

/* ---- a superadmin switched into someone ---- */
.switched-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 16px;background:var(--card)4e5;border-bottom:1px solid #f5d9ae;color:#7a3e00;font-size:13.5px}
.switched-bar form{margin:0}

/* ---- screen-reader-only text ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Leads: toolbar, read-only rows, and the Update strip ---- */
.lead-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.lead-search{display:flex;align-items:center;gap:6px;margin-left:auto;flex:1 1 280px;max-width:440px}
.lead-search input{flex:1;min-width:0}
.lead-count{margin:0 0 8px}
.lead-table td{vertical-align:top}
.lead-table .cv{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.lead-sub{font-size:12px;line-height:1.35}
/* Notes, courses and campaigns are one line in the list; the whole of each is on hover and in the lead itself. */
.lead-note,.lead-clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
/* The response and its note share a line; a call-back date drops beneath when there is one. */
.lead-table td[data-label="Response"] .cv{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
.lead-table td[data-label="Response"] .lead-note{flex:1 1 140px;min-width:0}
.lead-table td[data-label="Counsellor"] .lead-sub{white-space:nowrap}
/* Laptops: the column headings stay in view down a long list. Below this the table may need to
   scroll sideways, and a sideways scroller cannot hold a sticky heading. */
@media (min-width:1024px){
  .lead-wrap{overflow:visible}
  .lead-table thead th{position:sticky;top:54px;z-index:2;box-shadow:inset 0 -1px 0 var(--border)}   /* its own line: a collapsed border does not travel with it */
}
.lead-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.lead-table .wa{font-size:12px}
.lead-actions{white-space:nowrap;text-align:right;width:1%}
.lead-actions .btn + .btn{margin-left:4px}
.lead-actions .btn[aria-expanded="true"]{background:var(--text);color:var(--card)}
.pick-hit{display:inline-flex;align-items:center;margin:0;cursor:pointer}
[data-js="on"] .edit-row:not(.open){display:none}
.edit-row > td{background:var(--surface-2);padding:10px 12px}
.edit-panel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
.edit-panel form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;min-width:0;margin:0}
.edit-panel form + form{margin:0;padding:0;border:0}
.edit-response{flex:1 1 640px}
.edit-panel .ef{display:flex;flex-direction:column;gap:3px;min-width:150px}
.edit-panel .ef label{margin:0;font-size:11.5px;color:var(--muted)}
.edit-panel .ef-wide{flex:1 1 200px}
.edit-panel input,.edit-panel select{background:var(--card)}
[data-js="on"] .edit-panel .ef-lost:not(.on){display:none}   /* the reason appears when the lead is lost */
.edit-convert{margin-left:auto}                                /* its own decision, at the far end */
.edit-panel form > .btn{align-self:flex-end}                  /* on the fields' baseline, not centred on their labels */
@media (min-width:641px){
  .edit-panel input,.edit-panel select,.edit-panel .btn{height:35px}   /* one height, so every box and button lines up */
}
.btn[aria-busy="true"]{cursor:progress;opacity:.7}
/* A save's message, beside the lead it was about. */
.lead-table tr.row-note td{padding:8px 10px 0;border-bottom:0}
.lead-table tr.row-note .alert{margin:0}


/* Phones: each lead becomes a card, labels beside the values, actions under them. */
@media (max-width:640px){
  .lead-search{flex-basis:100%;max-width:none;margin-left:0}
  .lead-wrap{overflow:visible;padding:4px 14px}
  .lead-table thead{display:none}
  .lead-table,.lead-table tbody,.lead-table tr,.lead-table td{display:block;width:auto}
  .lead-table tr.lead-row{position:relative;padding:10px 0 8px;border-top:1px solid var(--border)}
  .lead-table tbody tr.lead-row:first-child{border-top:0}
  .lead-table tr.lead-row td{border:0;padding:1px 0}
  .lead-table td.pick-col{position:absolute;top:2px;right:-10px;padding:0}
  .lead-table td[data-label="Lead"]{padding-right:44px;font-size:14px}
  .lead-table td[data-label]:not([data-label="Lead"]){display:flex;align-items:baseline;gap:10px;font-size:13px}
  .lead-table td[data-label]:not([data-label="Lead"])::before{content:attr(data-label);flex:0 0 78px;padding-top:1px;color:var(--faint);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  .lead-table .cv{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .lead-table td.lead-actions{display:flex;gap:8px;padding-top:8px;text-align:left;width:auto}
  .lead-table tr.edit-row td{border:0;padding:10px 12px;border-radius:10px;margin-bottom:10px}
  .edit-panel .ef{min-width:0;flex:1 1 100%}
  .edit-panel form{flex:1 1 100%}
  input,select,textarea{font-size:16px}
}
/* Touch: every control gets a 44px target, whatever the screen width. */
@media (pointer:coarse), (max-width:640px){
  .btn.small,.lead-actions .btn{min-height:44px;padding:10px 14px}
  .lead-tabs .chip{min-height:44px}
  .pick-hit{justify-content:center;min-width:44px;min-height:44px}
  .pick-hit input{width:20px;height:20px}
  .lead-table .wa{display:inline-flex;align-items:center;min-height:44px}
  .modal .btn{min-height:44px}
  .pref-btn{width:44px;height:44px}
  .pref-row input{min-height:44px}
  .modal .check{min-height:44px}
}