/* SparxDSM Voice
   Mobile: single column, bottom tab bar.
   Desktop (>=900px): fixed sidebar + wide content, and list/detail side by side.
   Same HTML both ways -- the server always renders both panes, CSS decides
   which are visible, so there is no duplicate markup and no JS. */

:root {
  --bg:#0e1114; --surface:#171b20; --surface-2:#1f242b; --line:#2a3138;
  --text:#e8edf2; --muted:#8b98a6; --accent:#4ea1ff; --accent-dim:#2b5f96;
  --good:#3ecf8e; --warn:#f0a33c; --bad:#f2555a;
  --radius:12px; --tabh:58px; --sidew:216px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f4; --line:#d9dee4;
    --text:#141a20; --muted:#5c6a78; --accent:#1668c9; --accent-dim:#b9d4f2;
  }
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
}
a { color:var(--accent); text-decoration:none; }

/* ---- mobile header / sidebar visibility ---- */
.top {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand { font-weight:650; letter-spacing:.2px; }
.out { font-size:13px; color:var(--muted); }
.side { display:none; }

main { max-width:760px; margin:0 auto; padding:12px 12px 24px; }

/* ---- chips ---- */
/* ---- tab strip ----
   A taskbar band rather than tabs hanging off a full-width rule: the strip is
   its own recessed tray, and the selected item sits proud of it. The band ends
   where the tabs end, so there is no naked line running across the page. */
.chips {
  /* flex + fit-content, NOT inline-flex: an inline strip is a word in a line of
     text, so a short strip let the next one flow up beside it. fit-content keeps
     the tray hugging its tabs while still starting a new line. */
  display:flex; width:fit-content; gap:3px; max-width:100%;
  overflow-x:auto;
  /* Explicit: with overflow-x:auto the other axis computes to auto too, which
     let the strip be dragged up and down on touch. It must only slide sideways. */
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:3px; margin:2px 0 14px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
  vertical-align:top;
}
.chips::-webkit-scrollbar { display:none; }
.chip {
  position:relative; flex:0 0 auto;
  padding:7px 13px; font-size:13px; line-height:1.2;
  background:transparent; color:var(--muted);
  border:1px solid transparent; border-radius:5px;
  white-space:nowrap;
  transition:background .12s, color .12s;
}
.chip:hover { background:var(--bg); color:var(--text); }
.chip.on {
  background:var(--surface); color:var(--text); font-weight:650;
  border-color:var(--line);
  /* Inset-free lift: a drop shadow here would overflow the tray and reintroduce
     something for touch to scroll against. */
  box-shadow:0 1px 0 var(--line);
}
.chip.on::after {
  content:""; position:absolute; left:9px; right:9px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px;
}

/* ---- list ---- */
.list { display:flex; flex-direction:column; gap:8px; }
.card {
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; color:inherit;
}
.row { display:flex; align-items:flex-start; gap:12px; }
.row .grow { flex:1; min-width:0; }
.name { font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sub  { color:var(--muted); font-size:13px; margin-top:2px;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.when { color:var(--muted); font-size:12px; white-space:nowrap; padding-top:2px; }
.mono { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-top:7px; background:var(--muted); }
.dot.in  { background:var(--good); }
.dot.out { background:var(--accent); }
.dot.miss{ background:var(--bad); }

/* Columns that only earn their place on a wide screen. */
.deskonly { display:none; }

.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag {
  font-size:11px; padding:2px 7px; border-radius:3px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.tag.line { color:var(--accent); border-color:var(--accent-dim); }
.tag.spam { color:var(--bad);  border-color:var(--bad); }
.tag.new  { color:var(--good); border-color:var(--good); font-weight:600; }

audio { width:100%; margin-top:10px; height:36px; }
.transcript {
  margin-top:10px; padding:10px 12px; background:var(--surface-2);
  border-left:3px solid var(--accent-dim); border-radius:8px;
  font-size:14px; white-space:pre-wrap;
}
.transcript.none { color:var(--muted); font-style:italic; border-left-color:var(--line); }

.empty { text-align:center; color:var(--muted); padding:48px 16px; }
.sechead { font-size:12px; text-transform:uppercase; letter-spacing:.7px;
           color:var(--muted); margin:18px 2px 8px; font-weight:650; }
.more { display:block; text-align:center; padding:12px; color:var(--accent);
        background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius); margin-top:10px; }
.backlink { display:inline-block; color:var(--muted); font-size:13px; margin-bottom:8px; }

/* ---- split view ----
   Mobile: whichever pane is relevant. With a selection, the list hides and the
   detail fills the screen (classic drill-down). Desktop overrides this. */
.split { display:block; }
.pane-list   { display:block; }
.pane-detail { display:block; }
body.has-detail .pane-list { display:none; }
body:not(.has-detail) .pane-detail { display:none; }

/* ---- bottom tabs (mobile only) ---- */
.tabs {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 7px; color:var(--muted); font-size:11px;
}
.tab.on { color:var(--accent); }
.tab svg, .side-link svg { width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---- login ---- */
.login { max-width:360px; margin:12vh auto 0; padding:0 20px; }
.login h1 { font-size:20px; margin:0 0 4px; }
.login p.lede { color:var(--muted); margin:0 0 22px; font-size:14px; }
label { display:block; font-size:13px; color:var(--muted); margin:14px 0 5px; }
input[type=email],input[type=password],input[type=text],input[type=search] {
  width:100%; padding:11px 12px; font-size:16px;   /* 16px stops iOS zooming */
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:10px;
}
input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
button {
  width:100%; margin-top:18px; padding:12px; font-size:15px; font-weight:600;
  background:var(--accent); color:#fff; border:0; border-radius:10px; cursor:pointer;
}
.err { background:rgba(242,85,90,.12); border:1px solid var(--bad); color:var(--bad);
       padding:10px 12px; border-radius:10px; font-size:14px; margin-bottom:6px; }

/* =========================================================================
   DESKTOP
   ========================================================================= */
@media (min-width: 900px) {
  body { padding-bottom:0; }
  .top, .tabs { display:none; }

  .side {
    display:flex; flex-direction:column; gap:2px;
    position:fixed; inset:0 auto 0 0; width:var(--sidew);
    background:var(--surface); border-right:1px solid var(--line);
    padding:18px 12px 12px;
  }
  .side-brand { font-weight:650; font-size:16px; padding:0 10px 16px; letter-spacing:.2px; }
  .side-link {
    display:flex; align-items:center; gap:11px;
    padding:9px 10px; border-radius:9px; color:var(--muted); font-size:14px;
  }
  .side-link:hover { background:var(--surface-2); color:var(--text); }
  .side-link.on { background:var(--accent); color:#fff; font-weight:600; }
  .side-foot { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line);
               font-size:13px; }
  .side-user { color:var(--text); font-weight:600; margin-bottom:3px;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .side-foot a { color:var(--muted); }

  main { max-width:none; margin:0 0 0 var(--sidew); padding:24px 28px 40px; }

  /* Both panes visible, side by side. The list keeps its own scroll so the
     detail stays put while you page through calls. */
  .split { display:grid; grid-template-columns:minmax(340px, 420px) 1fr; gap:20px;
           align-items:start; }
  body.has-detail .pane-list { display:block; }
  body:not(.has-detail) .pane-detail { display:block; }
  body:not(.has-detail) .split { grid-template-columns:1fr; }
  body:not(.has-detail) .pane-detail { display:flex; align-items:center;
    justify-content:center; color:var(--muted); min-height:40vh; }
  .pane-list { max-height:calc(100vh - 120px); overflow-y:auto; padding-right:4px; }
  .pane-detail { position:sticky; top:24px; }

  /* Denser rows: a desktop screen can show the extra columns a phone cannot. */
  .card { padding:10px 13px; transition:border-color .12s, background .12s; }
  a.card:hover { border-color:var(--accent-dim); background:var(--surface-2); }
  a.card.sel { border-color:var(--accent); background:var(--surface-2); }
  .deskonly { display:inline; }
  .backlink { display:none; }          /* the list is right there */

  .list { gap:6px; }
  .sechead { margin-top:24px; }

  /* Wider reading measure for transcripts on a big screen. */
  .transcript { font-size:14.5px; line-height:1.55; padding:12px 14px; }

  .chips { flex-wrap:wrap; overflow:visible; }

  /* Detail card gets room to breathe. */
  .detail-card { padding:18px 20px; }
  .detail-card .name { font-size:19px; }
  .kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px;
        margin-top:14px; font-size:13.5px; }
  .kv dt { color:var(--muted); }
  .kv dd { margin:0; }
}

@media (min-width: 1400px) {
  main { padding:28px 48px 48px; }
  .split { grid-template-columns:minmax(380px, 460px) 1fr; gap:28px; }
}

/* ---- desktop: inbox side by side, voicemail in two columns ---- */
.cols { display:block; }
@media (min-width: 900px) {
  .cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
  .cols .sechead:first-child { margin-top:0; }
  /* Voicemail cards are tall (transcript + player); two columns uses the width
     without making any single card unreadably wide. */
  .list.grid2 { display:grid; grid-template-columns:1fr; gap:10px; }
}
@media (min-width: 1250px) {
  .list.grid2 { grid-template-columns:1fr 1fr; }
}

/* search snippet from a transcript */
.snip { font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.4;
        white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
        -webkit-box-orient:vertical; overflow:hidden; }
.snip mark { background:rgba(78,161,255,.22); color:var(--text);
             border-radius:3px; padding:0 2px; }

/* ---- inline action forms (mark / label) ---- */
.inline-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.inline-form input[type=text] { flex:1 1 200px; width:auto; margin:0; }
.btn-sm {
  width:auto; margin:0; padding:9px 14px; font-size:13.5px; font-weight:600;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:9px; cursor:pointer;
}
.btn-sm:hover { border-color:var(--accent); }
.btn-sm.danger { color:var(--bad); border-color:var(--bad); background:transparent; }
.btn-sm.danger:hover { background:rgba(242,85,90,.12); }
.btn-sm.ghost { color:var(--muted); background:transparent; }
.note {
  background:rgba(62,207,142,.12); border:1px solid var(--good); color:var(--good);
  padding:9px 12px; border-radius:9px; font-size:13.5px; margin-bottom:10px;
}
.name .tag { vertical-align:middle; margin-left:6px; font-weight:500; }

/* ---- organization: chip counts, sub-chips, day + group separators ---- */
.cnt {
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:11px; font-variant-numeric:tabular-nums;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.chip.on .cnt { background:var(--accent); color:#fff; border-color:transparent; }

/* Second-level strip: subordinate to the row above, so no tray of its own --
   two nested trays read as clutter. */
.sub-chips {
  background:transparent; border:none; padding:0;
  margin:-8px 0 12px; gap:4px;
}
.sub-chips .chip {
  font-size:12.5px; padding:5px 10px;
  border:1px solid var(--line); border-radius:5px; box-shadow:none;
}
.sub-chips .chip.on {
  background:var(--accent-dim); color:var(--text);
  border-color:var(--accent-dim); box-shadow:none;
}
.sub-chips .chip.on::after { display:none; }

/* day separator inside the call list */
.daysep {
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:650;
  color:var(--muted); padding:14px 2px 2px; position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg) 70%, transparent);
}
.daysep:first-child { padding-top:2px; }

/* mailbox group heading in voicemail */
.grouphead {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:20px 2px 8px; padding-bottom:6px; border-bottom:1px solid var(--line);
  font-weight:650; font-size:14.5px;
}
.grouphead:first-of-type { margin-top:6px; }
.ghmeta { font-weight:400; font-size:12px; color:var(--muted); }

@media (min-width:900px) {
  /* the list pane scrolls, so day separators stick to its top not the page's */
  .pane-list .daysep { background:linear-gradient(var(--bg) 70%, transparent); }
}

/* compact rows for the activity summary */
.card.compact { padding:9px 13px; }
.card.compact .name { font-size:14px; }
.card.compact .when { text-align:right; font-size:11.5px; line-height:1.35; }

/* ---- admin area ---- */
.admin-tabs { margin-bottom:14px; }
.formgrid { display:grid; grid-template-columns:1fr; gap:0 16px; }
.formgrid .wide { grid-column:1 / -1; }
@media (min-width:700px) { .formgrid { grid-template-columns:2fr 1fr 1fr 1fr; } }
select {
  width:100%; padding:11px 12px; font-size:15px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:10px;
}
.check { display:flex; align-items:center; gap:8px; margin-top:14px;
         font-size:14px; color:var(--text); }
.check input { width:auto; }
.card.off { opacity:.55; }
details.card > summary { cursor:pointer; color:var(--accent); font-size:13px; }
pre.raw {
  margin:10px 0 0; padding:10px; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; font-size:12px; line-height:1.45; overflow-x:auto; max-height:340px;
}
.kv dd .tag { margin-left:6px; }

/* five tabs need a little less room each on narrow phones */
@media (max-width:420px) { .tab { font-size:10px; } .tab svg { width:20px; height:20px; } }

/* colour swatches + icon thumbnails in the notification admin */
.swatch { width:14px; height:14px; border-radius:4px; flex:0 0 auto;
          border:1px solid var(--line); display:inline-block; }
.iconthumb { width:34px; height:34px; border-radius:8px; object-fit:cover;
             background:var(--surface-2); border:1px solid var(--line); flex:0 0 auto; }

/* ============ CATEGORY BADGES ============ */
/* Colour comes from the row itself, inline: tinted fill, solid text, soft
   border. See cat_badge() in lib.php. */
.badge {
  display:inline-block; padding:2px 8px; font-size:11px; font-weight:600;
  border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--muted);
  vertical-align:middle;
}
.badge.none { font-style:italic; font-weight:400; }

/* ============ COLOUR FIELD ============ */
.color-pair { display:inline-flex; align-items:stretch; gap:6px; width:100%; }
.color-pair .color-text { flex:1 1 auto; min-width:0; }
.color-pair .color-picker {
  flex:0 0 42px; width:42px; padding:2px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
}
.color-pair .color-picker::-webkit-color-swatch-wrapper { padding:0; }
.color-pair .color-picker::-webkit-color-swatch { border:none; border-radius:6px; }
.color-pair .color-picker::-moz-color-swatch { border:none; border-radius:6px; }

/* ============ ICON PICKER ============ */
.iconthumb.placeholder {
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:12px;
}
.icon-picker { position:relative; width:100%; }
.icon-picker-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 10px; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; color:var(--text); font:inherit; font-size:14px;
}
.icon-picker-trigger:hover { border-color:var(--accent-dim); }
.icon-picker-current { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.icon-picker-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-picker-caret { color:var(--muted); flex:0 0 auto; }

.icon-picker-popover {
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  width:420px; max-width:min(90vw, 420px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:10px; display:flex; flex-direction:column;
}
.icon-picker-popover[hidden] { display:none; }
.icon-picker-popover.align-right { left:auto; right:0; }
.icon-picker-controls { display:flex; gap:6px; margin-bottom:8px; }
.icon-picker-controls .icon-picker-search { flex:1 1 auto; min-width:0; }
.icon-picker-controls select { flex:0 0 auto; max-width:150px; }
.icon-picker-none { grid-column:1 / -1; color:var(--muted); font-size:13px; padding:14px 4px; text-align:center; }

.icon-picker-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(74px, 1fr));
  grid-auto-rows:80px; gap:6px; padding:2px;
  max-height:258px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.icon-tile {
  height:80px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:4px; overflow:hidden; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; font:inherit; color:var(--text);
}
.icon-tile:hover { border-color:var(--accent-dim); }
.icon-tile.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.icon-tile img, .icon-tile .iconthumb {
  width:44px; height:44px; object-fit:contain; flex:0 0 auto;
  background:transparent; border:0; border-radius:6px;
}
.icon-tile-name {
  font-size:11px; color:var(--muted); text-align:center; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============ ACCOUNT GEAR ============ */
.side-user { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side-user > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topright { display:flex; align-items:center; gap:12px; }
.gear { display:inline-flex; align-items:center; color:var(--muted); flex:0 0 auto; }
.gear:hover { color:var(--accent); }
.gear svg {
  width:18px; height:18px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ============ SEARCH + FILTER BAR ============ */
.vmsearch { margin:0 0 12px; }
.vmsearch form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vmsearch .vmq { flex:1 1 260px; min-width:0; }
.vmdates { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.vmdates label { display:inline-flex; align-items:center; gap:5px; }
.vmdates input[type=date] { padding:5px 7px; font-size:12.5px; }
.searching { opacity:.5; transition:opacity .1s; }
mark { background:var(--accent-dim); color:var(--text); border-radius:2px; padding:0 1px; }

/* ============ TRANSCRIPT CLAMP ============ */
/* Four lines by default. -webkit-line-clamp is the only widely supported way to
   clamp by LINE rather than height, and it is honoured by every current engine
   including Firefox. The max-height fallback below keeps older ones sane. */
.transcript.clampable { position:relative; }
.transcript.clampable[data-clamp] {
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; max-height:calc(4 * 1.45em + 20px);
}
.transcript.clampable:not([data-clamp]) { max-height:none; }
.clamp-btn {
  margin-top:6px; padding:2px 8px; font:inherit; font-size:12px;
  background:var(--surface-2); color:var(--accent);
  border:1px solid var(--line); border-radius:3px; cursor:pointer;
}
.clamp-btn:hover { border-color:var(--accent-dim); }

/* ============ DATE RANGE CONTROL ============ */
.drange { position:relative; display:inline-flex; align-items:center; gap:8px; }

/* The real <select> stays in the DOM and keeps working without JS; the script
   hides it and puts a styled trigger in its place. */
.drange-native { min-width:150px; }
.drange.enhanced .drange-native { display:none; }

.drange-trigger {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; font:inherit; font-size:13px; cursor:pointer;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:6px;
}
.drange-trigger:hover { border-color:var(--accent-dim); }
.drange-trigger .caret { color:var(--muted); font-size:10px; }

.drange-menu {
  position:absolute; top:calc(100% + 4px); left:0; z-index:70; min-width:190px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.35);
  padding:4px; display:flex; flex-direction:column;
}
.drange-menu[hidden] { display:none; }
.drange-menu button {
  text-align:left; padding:7px 10px; font:inherit; font-size:13px; cursor:pointer;
  background:transparent; color:var(--text); border:0; border-radius:5px;
}
.drange-menu button:hover { background:var(--surface-2); }
.drange-menu button[aria-checked=true] { background:var(--accent-dim); font-weight:650; }

.drange-custom { display:inline-flex; align-items:center; gap:6px; }
.drange-custom[hidden] { display:none; }
.drange-sep { color:var(--muted); font-size:12px; }
.drange-field {
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:4px 9px; font:inherit; cursor:pointer; min-width:96px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:6px;
}
.drange-field:hover, .drange-field.open { border-color:var(--accent); }
.drange-cap { font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.drange-val { font-size:13px; font-variant-numeric:tabular-nums; }

/* ---- calendar drawer ---- */
.drange-cal {
  position:absolute; top:calc(100% + 6px); left:0; z-index:70; width:252px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.35); padding:10px;
}
.drange-cal[hidden] { display:none; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-head .cal-title { font-size:13px; font-weight:650; }
.cal-nav {
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  font:inherit; cursor:pointer; background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); border-radius:5px;
}
.cal-nav:hover { border-color:var(--accent-dim); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow {
  font-size:10px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); text-align:center; padding:2px 0 4px;
}
.cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font:inherit; font-size:12px; font-variant-numeric:tabular-nums; cursor:pointer;
  background:transparent; color:var(--text);
  border:1px solid transparent; border-radius:5px;
}
.cal-day:hover { background:var(--surface-2); }
.cal-day.out { color:var(--muted); opacity:.45; }
.cal-day.today { border-color:var(--accent-dim); font-weight:650; }
.cal-day.inrange { background:var(--accent-dim); }
.cal-day.sel { background:var(--accent); color:#fff; font-weight:650; }
.cal-foot { display:flex; justify-content:space-between; margin-top:8px; }
.cal-foot button {
  font:inherit; font-size:12px; cursor:pointer; padding:3px 8px;
  background:transparent; color:var(--accent); border:1px solid var(--line); border-radius:5px;
}


/* ============ FILTER BAR: one height for every control ============
   The global `button` rule (width:100%, margin-top:18px, padding:12px) exists for
   full-width form submits. Every widget button below must opt out of it, or it
   is pushed 18px down and stretched -- which is why the date control and Clear
   sat lower and at a different size than the search box. */
:root { --ctl-h:44px; --ctl-r:10px; }
.vmsearch form { align-items:center; }
.vmsearch .vmq,
.vmsearch .drange-trigger,
.vmsearch .drange-field,
.vmsearch .btn-sm {
  height:var(--ctl-h); box-sizing:border-box; margin:0;
  border-radius:var(--ctl-r);
}
.vmsearch .vmq { padding-top:0; padding-bottom:0; }
.vmsearch .btn-sm { display:inline-flex; align-items:center; padding:0 14px; }
.vmsearch .drange-native { height:var(--ctl-h); margin:0; width:auto; }

.drange-trigger, .drange-field, .drange-menu button,
.cal-nav, .cal-day, .cal-foot button, .clamp-btn {
  width:auto; margin:0;
}
.drange-trigger { padding:0 12px; font-size:14px; min-width:150px; justify-content:space-between; }
/* single row so the field fits the shared height: "FROM  2026-09-01" */
.drange-field {
  flex-direction:row; align-items:center; gap:7px; padding:0 11px; min-width:0;
}
.drange-val { font-size:14px; }
.cal-day { padding:0; }


/* ============ POPOVER PLACEMENT ============
   The calendar and preset menu are measured after opening (see place() in
   widget_script) and nudged back inside the viewport. Below 560px they stop
   being popovers at all and become a bottom sheet -- on a phone there is no
   position beside a field that reliably fits a 7-column calendar. */
.drange-menu.flip, .drange-cal.flip { top:auto; bottom:calc(100% + 6px); }
.drange-menu.sheet, .drange-cal.sheet {
  position:fixed; top:auto !important; bottom:0; left:0 !important; right:0;
  width:auto; min-width:0; max-height:80vh; overflow-y:auto;
  border-radius:14px 14px 0 0; border-bottom:none;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  z-index:1001;
}
.drange-cal.sheet .cal-head, .drange-cal.sheet .cal-grid, .drange-cal.sheet .cal-foot {
  max-width:420px; margin-left:auto; margin-right:auto;
}
.drange-cal.sheet .cal-day { font-size:15px; }
.drange-menu.sheet button { padding:12px 14px; font-size:15px; }
/* Hit-testable, so tapping outside the sheet dismisses it instead of also
   activating whatever link happened to be underneath. */
.drange-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; }
.drange-backdrop[hidden] { display:none; }

/* ---- fax ---------------------------------------------------------------- */
/* The document itself. A PDF in an iframe is the only viewer that needs no
   JavaScript and no library; the Open/Download links cover phones whose inline
   PDF rendering is poor. */
.faxdoc { display:block; width:100%; height:72vh; min-height:420px; margin-top:12px;
          border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.faxdoc-links { display:flex; gap:8px; margin-top:8px; }

/* Drag-and-drop. Progressive: without JS this is a labelled, visible file input
   that submits normally. With JS the input is visually hidden but stays inside
   the label, so a click still opens the picker and the form fields are unchanged. */
.dropzone { position:relative; display:flex; flex-direction:column; align-items:center;
            justify-content:center; gap:6px; padding:26px 16px; text-align:center;
            border:2px dashed var(--line); border-radius:var(--radius);
            background:var(--surface-2); color:var(--muted); cursor:pointer;
            transition:border-color .12s, background .12s, color .12s; }
.dropzone:hover, .dropzone.over { border-color:var(--accent); color:var(--text); }
.dropzone.has-file { border-style:solid; border-color:var(--good); color:var(--text); }
.dropzone.bad      { border-style:solid; border-color:var(--bad); }
.dropzone .dz-big  { font-size:15px; font-weight:600; color:var(--text); }
.dropzone .dz-file { font-size:13px; word-break:break-all; }
.dropzone.enhanced input[type=file] { position:absolute; width:1px; height:1px;
            opacity:0; pointer-events:none; }
.faxmeta { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px;
           color:var(--muted); margin-top:8px; }
.faxmeta b { color:var(--text); font-weight:500; }

/* Touch devices see fax pages as stacked images instead of the PDF iframe:
   iOS Safari renders an embedded PDF as a flat, unzoomable image of page 1.
   Chosen by pointer type rather than width, so an iPad is covered too. */
.faxpages { display:none; margin-top:12px; }
.faxpages img { display:block; width:100%; height:auto; background:#fff;
                border:1px solid var(--line); border-radius:6px; }
.faxpage-cap { text-align:center; margin:4px 0 14px; }
@media (hover:none) and (pointer:coarse) {
  .faxdoc   { display:none; }
  .faxpages { display:block; }
}

@media (min-width:900px) {
  /* .sub-chips pulls itself up (margin-top:-8px) to tuck under a tab row above
     it. When it is the FIRST thing in a pane-list -- which scrolls on desktop,
     and so clips -- that pulled its top edge out of view. Mobile is unaffected:
     the pane does not scroll there, so the overlap is visible and looks right. */
  .pane-list > .sub-chips:first-child { margin-top:2px; }
}

/* Client-side pager for fax page images (see fax.php). Without JS the pages stay
   stacked; the script adds .paged and shows one .faxpage at a time. */
.faxpage { margin:0; }
.faxpager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.faxpager-count { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.faxpager .btn-sm:disabled { opacity:.35; cursor:default; }
.faxpages.paged .faxpage { display:none; }
.faxpages.paged .faxpage.cur { display:block; }
.faxpages.paged .faxpage-cap { display:none; }   /* the pager shows the count */

/* name .tag clip fix -----------------------------------------------------------
   .name truncates with overflow:hidden, and an inline .tag inside it (padding +
   border, vertical-align:middle) is taller than the text line, so its bottom
   border was shaved off -- fax status and call spam/trusted tags alike. Grow the
   clip box with padding and cancel it with an equal negative margin: the tag
   fits, nothing moves. Chosen over overflow-x:clip, whose ellipsis support on iOS
   Safari is not something to rely on blind. */
.name { padding-top:3px; padding-bottom:3px; margin-top:-3px; margin-bottom:-3px; }

/* .sub is one-line and ellipsized for card subtitles, which is right. But <p> help
   text uses it too, and a sentence someone needs to read was cut to one line
   ("premium-rate and inter..."). Paragraphs wrap. */
p.sub { white-space:normal; overflow:visible; text-overflow:clip; }

/* ============ LINES SEARCH ============
   .card sets its own display, which beats the UA's [hidden] rule -- so filtered-out
   cards and empty organization groups need hiding explicitly. */
#ln-results .card[hidden], #ln-results .ln-group[hidden], #ln-empty[hidden] { display:none; }


/* ============ MUSIC LIBRARY ============ */
.btn-sm.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-sm.primary:hover { filter:brightness(1.08); }
.btn-sm[disabled] { opacity:.45; cursor:not-allowed; }

.mdz .dz-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
                justify-content:center; background:var(--surface); border:1px solid var(--line); }
.mdz .dz-icon svg { width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.8;
                    stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:700px) { .formgrid.mgrid { grid-template-columns:1fr 1fr; } }

/* pill checkboxes */
.offers { border:0; padding:0; margin:14px 0 0; min-width:0; }
.offers legend { font-size:13px; color:var(--muted); padding:0; margin-bottom:8px; }
.offers-sub { font-size:12px; color:var(--muted); margin:12px 0 6px; text-transform:uppercase; letter-spacing:.6px; }
.offers-help { margin-top:8px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
label.pill { display:inline-flex; margin:0; position:relative; cursor:pointer; }
.pill input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.pill span { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 9px; border-radius:999px;
             border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
             font-size:13px; font-weight:600; transition:background .12s, border-color .12s, color .12s;
             user-select:none; }
.pill span::before { content:''; width:16px; height:16px; border-radius:50%; box-sizing:border-box;
                     border:1.5px solid var(--muted); flex:0 0 auto; transition:all .12s; }
.pill:hover span { color:var(--text); border-color:var(--accent-dim); }
.pill input:checked + span { color:var(--text); border-color:var(--accent); background:rgba(78,161,255,.14); }
.pill input:checked + span::before {
  border-color:var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pill.accent input:checked + span { border-color:var(--good); background:rgba(62,207,142,.14); }
.pill.accent input:checked + span::before { border-color:var(--good); background-color:var(--good); }
.pill input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

/* segmented control */
.seg { display:inline-flex; gap:2px; padding:3px; background:var(--surface); border:1px solid var(--line);
       border-radius:11px; }
.seg label { margin:0; position:relative; display:block; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.seg span { display:flex; flex-direction:column; align-items:center; padding:5px 10px; border-radius:8px;
            font-size:12.5px; font-weight:650; color:var(--muted); cursor:pointer; white-space:nowrap;
            line-height:1.15; transition:background .12s, color .12s; }
.seg span small { font-size:10px; font-weight:600; letter-spacing:.3px; opacity:.8; }
.seg label:hover span { color:var(--text); }
.seg input:checked + span { background:var(--surface-2); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent-dim); }
.seg input:checked + span small { color:var(--accent); opacity:1; }
.seg input:focus-visible + span { outline:2px solid var(--accent); outline-offset:1px; }

/* track cards */
.mchips button.chip { width:auto; margin:0; border:0; font:inherit; cursor:pointer; }
.mlist { display:grid; gap:10px; }
@media (min-width:1200px) { .mlist { grid-template-columns:1fr 1fr; align-items:start; } }
#mh-results .mtrack[hidden], #mh-empty[hidden] { display:none; }
#mh-empty { grid-column:1 / -1; }
.mtrack { transition:border-color .15s, box-shadow .15s; }
.mtrack.playing { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-dim); }
.mtrack:target { border-color:var(--accent-dim); }
.mtrack-head { display:flex; gap:14px; align-items:flex-start; }
.mtrack-art { width:64px; height:64px; flex:0 0 64px; border-radius:12px; overflow:hidden;
              display:flex; align-items:center; justify-content:center;
              background:linear-gradient(135deg, var(--accent-dim), var(--surface-2)); }
.mtrack-art img { width:100%; height:100%; object-fit:cover; display:block; }
.mtrack-art svg { width:28px; height:28px; fill:none; stroke:#fff; stroke-width:1.7;
                  stroke-linecap:round; stroke-linejoin:round; opacity:.9; }

/* player */
.mplayer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:10px 12px;
           background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.mp-play { width:44px; height:44px; flex:0 0 44px; margin:0; padding:0; border-radius:50%;
           display:inline-flex; align-items:center; justify-content:center; background:var(--accent);
           box-shadow:0 2px 8px rgba(78,161,255,.35); transition:transform .1s, filter .12s; }
.mp-play:hover { filter:brightness(1.08); }
.mp-play:active { transform:scale(.94); }
.mp-play svg { width:20px; height:20px; fill:#fff; }
.mp-play .i-pause, .mplayer.is-playing .mp-play .i-play { display:none; }
.mplayer.is-playing .mp-play .i-pause { display:inline; }
.mp-body { flex:1 1 180px; min-width:0; }
.mp-seek { -webkit-appearance:none; appearance:none; width:100%; height:20px; margin:0; padding:0;
           background:transparent; cursor:pointer; --p:0%; border:0; }
.mp-seek:focus { outline:none; }
.mp-seek::-webkit-slider-runnable-track { height:5px; border-radius:3px;
  background:linear-gradient(to right, var(--accent) var(--p), var(--line) var(--p)); }
.mp-seek::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; margin-top:-5px;
  border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 4px rgba(78,161,255,.28); }
.mp-seek::-moz-range-track { height:5px; border-radius:3px; background:var(--line); }
.mp-seek::-moz-range-progress { height:5px; border-radius:3px; background:var(--accent); }
.mp-seek::-moz-range-thumb { width:15px; height:15px; border:0; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(78,161,255,.28); }
.mp-seek:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent); }
.mp-time { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);
           font-variant-numeric:tabular-nums; margin-top:1px; }

/* progress */
.mup-progress { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:13px; color:var(--muted); }
.mup-progress[hidden], #mup-err[hidden] { display:none; }
.mbar { flex:1; height:7px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.mbar span { display:block; height:100%; width:0; background:var(--accent); border-radius:4px; transition:width .2s; }
.mbar.indeterminate span { width:35%; animation:mbar 1.2s ease-in-out infinite; }
@keyframes mbar { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
.mstatus { display:flex; align-items:center; gap:12px; margin-top:12px; font-size:13px; color:var(--muted); }

/* editor */
.mtrack-edit { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.mtrack-edit summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
                       font-size:13px; font-weight:650; color:var(--muted); user-select:none; }
.mtrack-edit summary::-webkit-details-marker { display:none; }
.mtrack-edit summary::before { content:''; width:6px; height:6px; border-right:2px solid currentColor;
                               border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; }
.mtrack-edit[open] summary::before { transform:rotate(45deg); }
.mtrack-edit summary:hover { color:var(--text); }
.mtrack-edit .mdel { margin-top:14px; }


/* ============ DROPDOWN MULTI-SELECT (multi_select() in lib.php) ============ */
.msel { position:relative; width:100%; }
.msel-trigger { list-style:none; display:flex; align-items:center; gap:8px; min-height:44px; box-sizing:border-box;
  padding:6px 12px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; user-select:none; transition:border-color .12s, box-shadow .12s; }
.msel-trigger::-webkit-details-marker { display:none; }
.msel-trigger:hover { border-color:var(--accent-dim); }
.msel[open] > .msel-trigger, .msel-trigger:focus-visible {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,161,255,.18); }
.msel-value { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.msel-placeholder { color:var(--muted); font-size:14px; padding:4px 0; }
.msel-chip { display:inline-flex; align-items:center; gap:3px; max-width:100%; padding:3px 9px;
  border-radius:999px; font-size:12.5px; font-weight:600; color:var(--text);
  background:rgba(78,161,255,.14); border:1px solid var(--accent-dim); white-space:nowrap; }
.msel.enhanced .msel-chip:not(.more) { padding-right:3px; }
.msel-chip.more { background:var(--surface-2); border-color:var(--line); color:var(--muted); }
.msel-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; font-size:15px; line-height:1; color:var(--muted); cursor:pointer; }
.msel-x:hover { background:var(--accent); color:#fff; }
.msel-caret { flex:0 0 auto; width:8px; height:8px; margin:0 3px 4px 4px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s, margin .15s; }
.msel[open] .msel-caret { transform:rotate(-135deg); margin-bottom:-4px; }

.msel-pop { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 36px rgba(0,0,0,.38); }
.msel.up .msel-pop { top:auto; bottom:calc(100% + 6px); }
.msel:not(.enhanced) .msel-pop { position:static; margin-top:6px; box-shadow:none; }
.msel[open] .msel-pop { animation:msel-in .12s ease-out; }
@keyframes msel-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.msel-search { margin:0 0 6px; padding:9px 11px; }
.msel-list { max-height:264px; overflow-y:auto; overscroll-behavior:contain; }
.msel-group { padding:8px 8px 4px; font-size:11px; font-weight:650; letter-spacing:.7px;
  text-transform:uppercase; color:var(--muted); }
.msel-group[hidden], .msel-opt[hidden], .msel-none[hidden] { display:none; }
label.msel-opt { position:relative; display:flex; align-items:center; gap:10px; margin:0; padding:9px 8px;
  border-radius:8px; cursor:pointer; color:var(--text); font-size:14px; }
.msel-opt:hover { background:var(--surface-2); }
.msel-opt input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.msel-box { flex:0 0 18px; width:18px; height:18px; box-sizing:border-box; border-radius:5px;
  border:1.5px solid var(--muted); transition:background .12s, border-color .12s; }
.msel-opt input:checked + .msel-box {
  border-color:var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.msel-opt input:focus-visible + .msel-box { outline:2px solid var(--accent); outline-offset:2px; }
.msel-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msel-meta { font-size:11px; color:var(--muted); padding:1px 7px; border:1px solid var(--line); border-radius:999px; }
.msel-none { padding:10px 8px; font-size:13px; color:var(--muted); }
.msel-foot { display:none; justify-content:space-between; gap:8px; margin-top:6px; padding-top:8px;
  border-top:1px solid var(--line); }
.msel.enhanced .msel-foot { display:flex; }
.msel-foot button { width:auto; margin:0; padding:7px 14px; font-size:13px; border-radius:8px; }
.msel-clear { background:transparent; color:var(--muted); border:1px solid var(--line); }
.msel-clear:hover { color:var(--text); border-color:var(--accent-dim); }
.offers .msel { margin-top:2px; }


/* ============ MUSIC: CLASSES + PLAYLISTS ============ */
.mtabs { margin-bottom:14px; }
.mnew { padding:0; }
.mnew > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
                  padding:14px 16px; font-weight:650; user-select:none; }
.mnew > summary::-webkit-details-marker { display:none; }
.mnew > summary .plus { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff;
                        display:inline-flex; align-items:center; justify-content:center; font-size:19px;
                        line-height:1; transition:transform .15s; }
.mnew[open] > summary .plus { transform:rotate(45deg); }
.mnew > form { padding:0 16px 16px; }
@media (min-width:900px) { .mnew > summary { padding:16px 20px; } .mnew > form { padding:0 20px 18px; } }

.mp-ctl { display:flex; align-items:center; gap:6px; }
.mp-skip { width:34px; height:34px; flex:0 0 34px; margin:0; padding:0; border-radius:50%;
           display:inline-flex; align-items:center; justify-content:center; background:transparent;
           border:1px solid var(--line); color:var(--text); }
.mp-skip:hover { border-color:var(--accent); }
.mp-skip svg { width:13px; height:13px; fill:currentColor; }
.mp-now { display:flex; gap:6px; font-size:12.5px; white-space:nowrap; overflow:hidden; margin-bottom:1px; }
.mp-idx { color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.mp-title { overflow:hidden; text-overflow:ellipsis; }

.mcl { margin-top:10px; }
.mcl > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
                 font-size:13px; font-weight:650; color:var(--muted); user-select:none; }
.mcl > summary::-webkit-details-marker { display:none; }
.mcl > summary::before { content:''; width:6px; height:6px; border-right:2px solid currentColor;
                         border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .15s; }
.mcl[open] > summary::before { transform:rotate(45deg); }
.mcl > summary:hover { color:var(--text); }
.mcl-list { list-style:none; margin:8px 0 0; padding:0; counter-reset:mcl; }
.mcl-list li { display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:8px; font-size:13.5px;
               counter-increment:mcl; }
.mcl-list li::before { content:counter(mcl); min-width:16px; text-align:right; color:var(--muted);
                       font-size:12px; font-variant-numeric:tabular-nums; }
.mcl-list li:hover { background:var(--surface-2); }
.mcl-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcl-len { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.mcl-jump { width:26px; height:26px; flex:0 0 26px; margin:0; padding:0; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            background:var(--surface-2); border:1px solid var(--line); cursor:pointer; }
.mcl-jump svg { width:10px; height:10px; fill:var(--text); margin-left:1px; }
.mcl-jump:hover { border-color:var(--accent); }
.mcl-jump.on { background:var(--accent); border-color:var(--accent); }
.mcl-jump.on svg { fill:#fff; }
.mcl-jump.off { visibility:hidden; }

/* play order */
.seg.msort span { padding:6px 12px; }

/* class track editor */
.ctracks { margin-top:14px; }
.ctrack-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:ct; }
.ctrack { display:flex; align-items:center; gap:10px; padding:7px 8px 7px 6px; background:var(--surface-2);
          border:1px solid var(--line); border-radius:10px; counter-increment:ct; }
.ctrack.dragging { opacity:.55; border-style:dashed; border-color:var(--accent); }
.ctrack-grip { width:14px; height:20px; flex:0 0 14px; cursor:grab; opacity:.7;
               background-image:radial-gradient(var(--muted) 1.2px, transparent 1.4px);
               background-size:5px 5px; background-position:center; }
.ctracks:not(.enhanced) .ctrack-grip, .ctracks:not(.enhanced) .ctrack-btn { display:none; }
.ctrack-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.ctrack-name::before { content:counter(ct) '. '; color:var(--muted); font-variant-numeric:tabular-nums; }
.ctrack-len { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.ctrack-actions { display:inline-flex; gap:4px; }
.ctrack-btn { width:30px; height:30px; margin:0; padding:0; border-radius:8px; display:inline-flex;
              align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line);
              color:var(--text); cursor:pointer; }
.ctrack-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2;
                  stroke-linecap:round; stroke-linejoin:round; }
.ctrack-btn:hover { border-color:var(--accent); }
label.ctrack-rm { position:relative; margin:0; display:inline-flex; align-items:center; gap:4px;
                  font-size:12px; color:var(--muted); cursor:pointer; }
.ctracks.enhanced label.ctrack-rm input { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.ctracks.enhanced .ctrack-rm { width:30px; height:30px; margin:0; padding:0; justify-content:center;
                               border-radius:8px; background:var(--surface); border:1px solid var(--line);
                               font-size:18px; line-height:1; color:var(--muted); cursor:pointer; }
.ctrack-rm:hover { color:var(--bad); border-color:var(--bad); }
.ctrack-empty[hidden] { display:none; }
.ctracks .msel { margin-top:8px; }
.msel-opt.taken { display:none; }


/* ============ PHONES ============ */
form.ep-inline { display:inline-flex; margin:0; }
.ep-lines .ctrack { padding:9px 8px 9px 12px; }
.ep-lines .ctrack-name { white-space:normal; }
.ep-lines .ctrack-name .sub { display:block; margin-top:1px; }
button.ep-x { font-size:18px; line-height:1; color:var(--muted); }
button.ep-x:hover { color:var(--bad); border-color:var(--bad); }
.ep-pending { display:flex; flex-direction:column; gap:6px; }
.ep-pend { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 10px;
           border:1px dashed var(--accent-dim); border-radius:10px; background:rgba(78,161,255,.06); }
.ep-pend .sub { margin-top:0; }
.ep-codes { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.ep-code { display:flex; align-items:center; gap:12px; padding:7px 8px 7px 7px; background:var(--surface-2);
           border:1px solid var(--line); border-radius:10px; }
.ep-code-key { min-width:58px; text-align:center; padding:4px 8px; border-radius:7px; font-weight:700;
               background:var(--surface); border:1px solid var(--line); color:var(--accent); }
.ep-code-label { flex:1; min-width:0; font-size:14px; }
.ep-code .ep-inline { margin-left:auto; }
.ep-addcode { margin-top:12px; border-top:1px solid var(--line); padding-top:4px; }
@media (min-width:700px) { .ep-addcode .formgrid { grid-template-columns:1fr 2fr; } }

/* ---- voicemail: mailboxes, voice picker, read/unread (v31) ---- */
.voicepick { display: flex; gap: 8px; align-items: center; }
.voicepick select { flex: 1; min-width: 0; }
.tags .vm-mark { padding: 2px 10px; font-size: 12px; line-height: 1.6; }
.tags .vm-mark[hidden] { display: none; }
details.detail-card > summary { list-style: none; }
details.detail-card > summary::-webkit-details-marker { display: none; }
details.detail-card > summary::after { content: '+'; float: right; opacity: .6; }
details.detail-card[open] > summary::after { content: '\2013'; }

/* ---- queues (v32) ---- */
.daypills { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-pend > .dot { flex: none; align-self: center; }
.ep-pend form { flex: none; }

/* =========================================================================
   IVR editor (ivrs.php?id=N, assets/ivr.js)
   A tree of <details>: the main menu open, keys and submenus folded. Buttons
   inside it are .ivr-mini, because a bare <button> here is full-width.
   ========================================================================= */
.ivr-bar {
  position:sticky; top:calc(44px + env(safe-area-inset-top)); z-index:15;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  background:var(--bg); padding:8px 0 10px; margin-bottom:10px; border-bottom:1px solid var(--line);
}
@media (min-width:900px) { .ivr-bar { top:0; } }
.ivr-title { flex:1 1 220px; min-width:0; font-size:17px; font-weight:650; }
.ivr-status { font-size:13px; font-weight:500; margin-top:2px; white-space:normal; }
.ivr-status.live    { color:var(--good); }
.ivr-status.pending { color:var(--warn); }
.ivr-status.error   { color:var(--bad); }
.ivr-dirty { color:var(--warn); font-size:13px; }
.ivr-bar .btn-sm:disabled { opacity:.5; cursor:default; }
.ivr-reach { font-size:13.5px; color:var(--muted); margin:0 0 10px; }
.ivr-banner { margin-bottom:10px; }
.ivr-settings { margin-bottom:10px; }
.ivr-hint { font-size:12.5px; color:var(--muted); margin:3px 0 0; white-space:normal; }

.ivr-app details { border:1px solid var(--line); border-radius:10px; margin:8px 0; }
.ivr-app details > summary {
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px;
  padding:10px 12px; min-width:0;
}
.ivr-app details > summary::-webkit-details-marker { display:none; }
.ivr-app details > summary::before { content:'\25b8'; color:var(--muted); flex:0 0 12px; }
.ivr-app details[open] > summary::before { content:'\25be'; }
.ivr-app details.ivr-menu { background:var(--surface); }
.ivr-app details.ivr-menu details.ivr-menu { background:var(--surface-2); }
.ivr-app details.ivr-key { background:var(--surface-2); }
.ivr-app details.ivr-menu details.ivr-menu details.ivr-key { background:var(--surface); }
.ivr-app details.ivr-handler > summary { padding:8px 12px; }
.ivr-root { border-color:var(--accent-dim) !important; }
.ivr-body { padding:0 12px 12px; }
.ivr-sum {
  flex:1; min-width:0; color:var(--muted); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ivr-keybadge {
  flex:0 0 auto; min-width:26px; text-align:center; font-weight:700; font-size:14px;
  padding:0 6px; border:1px solid var(--accent-dim); border-radius:6px; color:var(--accent);
}
.ivr-klabel { flex:0 1 auto; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ivr-hname { flex:0 0 auto; font-weight:600; font-size:13.5px; }
.ivr-handlers { margin-top:14px; border-top:1px dashed var(--line); padding-top:4px; }

.ivr-slot { margin-top:12px; }
.ivr-slothead {
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:650;
  color:var(--muted); margin:14px 0 2px;
}
.ivr-slot .ivr-slothead { margin-top:0; }
.ivr-count { text-transform:none; letter-spacing:0; font-weight:500; }
.ivr-prompt {
  margin-top:6px; padding:8px; border:1px solid var(--line); border-radius:9px; background:var(--bg);
}
.ivr-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ivr-spacer { flex:1 1 0; }
.ivr-app select, .ivr-app input[type=number] {
  width:auto; max-width:100%; padding:7px 9px; font-size:14px;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:8px;
}
.ivr-app input[type=number] { width:76px; }
.ivr-app input[type=text] { padding:8px 10px; font-size:15px; }
.ivr-prompt select.ivr-grow { flex:1 1 220px; margin-top:6px; }
.ivr-prompt textarea {
  display:block; width:100%; min-height:44px; margin-top:6px; padding:8px 10px;
  font:inherit; font-size:15px; resize:vertical;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:8px;
}
.ivr-prompt textarea:focus, .ivr-app select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.ivr-badge { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.ivr-badge:empty { display:none; }
.ivr-badge.warn { color:var(--warn); }
.ivr-badge.bad  { color:var(--bad); }
.ivr-fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; margin-top:10px; }
.ivr-field { display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--muted); min-width:0; }
.ivr-field.grow { flex:1 1 220px; }
.ivr-field.grow select, .ivr-field.grow input { width:100%; }
.ivr-inline { display:flex; align-items:center; gap:6px; color:var(--text); }
.ivr-mini {
  width:auto; margin:6px 0 0; padding:5px 10px; font-size:13px; font-weight:600;
  background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:7px; cursor:pointer;
}
.ivr-row .ivr-mini { margin:0; }
.ivr-mini:hover { color:var(--text); border-color:var(--accent); }
.ivr-mini.danger:hover { color:var(--bad); border-color:var(--bad); }
.ivr-mini:disabled { opacity:.5; cursor:default; }
.ivr-keyfoot { margin-top:12px; }
.ivr-err { color:var(--bad); font-size:13px; margin:4px 0; white-space:normal; }
.ivr-err-field { outline:2px solid var(--bad) !important; }
.ivr-danger { margin-top:18px; }