:root{
    --bg:#f6f6f7; --surface:#ffffff; --sunk:#fafafa;
    --line:#e3e3e6; --line2:#d3d3d8;
    --text:#1c1c1f; --dim:#5f6069; --faint:#8b8c95;
    --accent:#8a1a20; --accent-soft:#fdf2f2;
    --amber:#a06a12; --amber-soft:#fdf6e8;
    --ok:#1e6b3c; --ok-soft:#eef7f1;
    --no:#a52a1f; --no-soft:#fdf1ef;
    --shadow:0 1px 2px rgba(20,20,25,.06), 0 1px 1px rgba(20,20,25,.04);
    --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --prose:Georgia,"Iowan Old Style",Palatino,serif;
    /* Fluid, so type tracks the viewport rather than jumping at a breakpoint. */
    --t-body:clamp(.9rem,  .855rem + .22vw, 1rem);
    --t-sm:  clamp(.83rem, .795rem + .18vw, .9rem);
    --t-xs:  clamp(.76rem, .735rem + .13vw, .82rem);
    --t-label:clamp(.66rem,.645rem + .09vw, .72rem);
    --tap:2.65rem; --r:8px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);
       font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased}
  button,input,select,textarea{font-family:inherit;font-size:var(--t-sm);color:inherit}
  img{max-width:100%;display:block}
  h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}

  /* ---------- header: two tight rows on a phone (~86px), one from 900 ---------- */
  header.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
             backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  /* .7rem not .9rem: at 360 the brand + persona + arrow + menu needed 339px inside 331px of
     usable width. 360 is a real phone, not just a test number. */
  .bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem}
  .brand{text-decoration:none;color:inherit;font-size:.9rem;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
  .brand b{color:var(--accent);font-weight:650}
  /* Leaving the admin: a bare arrow. Minimal, and it frees the width the menu button needs. */
  .viewsite{flex:none;display:inline-grid;place-items:center;min-width:var(--tap);min-height:var(--tap);
    border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);text-decoration:none}
  .viewsite i{font-style:normal;color:var(--dim);font-size:1rem;line-height:1}
  .viewsite:hover{border-color:var(--text)} .viewsite:hover i{color:var(--text)}
  .menu-btn{flex:none;min-width:var(--tap);min-height:var(--tap);background:var(--surface);
    border:1px solid var(--line2);border-radius:var(--r);color:var(--dim);font-size:1.05rem;cursor:pointer}
  .menu-btn:hover{border-color:var(--text);color:var(--text)}
  .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--dim);cursor:pointer;
           text-decoration:underline;text-underline-offset:2px}
  .linkbtn:hover{color:var(--no)}
  .brand span{margin-left:.4rem;font-size:var(--t-label);font-weight:500;color:var(--faint);
              text-transform:uppercase;letter-spacing:.09em}
  .who{margin-left:auto;display:flex;align-items:center;gap:.3rem}
  .seg{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:2px;gap:2px}
  .seg button{background:none;border:0;border-radius:6px;color:var(--dim);font-size:var(--t-xs);
              font-weight:500;padding:.42rem .6rem;cursor:pointer;white-space:nowrap}
  .seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-weight:600}
  .seg button.on[data-p="ANIKEN"]{color:var(--accent)}
  /* Base: a disclosure panel. It becomes a row at 480, where the five items finally fit. */
  nav.main{display:none;flex-direction:column;padding:0;border-top:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:none;text-decoration:none;display:flex;align-items:center;background:none;border:0;
    border-bottom:1px solid var(--line);color:var(--dim);font-size:var(--t-sm);font-weight:500;
    padding:.75rem .9rem;min-height:var(--tap);cursor:pointer}
  nav.main a:last-child{border-bottom:0}
  /* In the dropdown, a tinted accent divider is too quiet to read as "you are here". */
  nav.main a.on{box-shadow:inset 3px 0 0 var(--accent);background:var(--sunk)}
  @media (min-width:480px){
    .bar{gap:.6rem;padding:.5rem .9rem}
    .who{gap:.4rem}
    nav.main{display:flex !important;flex-direction:row;gap:.15rem;padding:0 .9rem;
             overflow-x:auto;scrollbar-width:none;border-top:0}
    nav.main a{display:inline-block;border-bottom:2px solid transparent;padding:.55rem .55rem .5rem;min-height:0}
    nav.main a:last-child{border-bottom:2px solid transparent}
    nav.main a.on{box-shadow:none;background:none}
    .menu-btn{display:none}
  }
  nav.main a.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
  /* Only clearable work gets a badge — see needs() in app.js. */
  nav.main .nb{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;margin-left:.3rem;
    padding:0 .28rem;border-radius:999px;background:var(--accent);color:#fff;
    font-size:var(--t-label);font-weight:700;line-height:1;vertical-align:middle}
  .needsbar{margin-bottom:1.1rem}
  .txwhy{display:block;font-size:var(--t-label);color:var(--accent);font-style:italic}
  .txgrp{display:inline-block;margin-top:.15rem;font-size:var(--t-label);color:var(--faint);
         text-transform:uppercase;letter-spacing:.07em}

  main{padding:1.15rem .9rem 3.5rem}
  .page{margin-bottom:1.1rem}
  h1{font-size:1.35rem}
  .lede{margin:.3rem 0 0;font-size:var(--t-sm);color:var(--dim);max-width:44rem}
  .sech{margin:1.5rem 0 .55rem;font-size:var(--t-label);letter-spacing:.09em;
        text-transform:uppercase;color:var(--faint);font-weight:600}
  .note{background:var(--amber-soft);border:1px solid #f0e2c4;border-radius:var(--r);
        padding:.7rem .8rem;font-size:var(--t-xs);color:#6b5416;line-height:1.5}
  .note b{color:#4a3a0e}

  /* ---------- chips ---------- */
  .tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
  .tabs a{text-decoration:none;display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:99px;
    color:var(--dim);font-size:var(--t-xs);font-weight:500;padding:.4rem .7rem;min-height:2.2rem;
    cursor:pointer;white-space:nowrap}
  .tabs a.on{background:var(--text);border-color:var(--text);color:#fff;font-weight:600}
  .tabs a .n{margin-left:.35rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .tabs a.on .n{color:rgba(255,255,255,.7)}
  .tabs .div{width:100%;height:0;margin:.1rem 0}   /* a line break, not a divider, once they wrap */

  /* ---------- cards ---------- */
  .grid{display:grid;grid-template-columns:1fr;gap:.85rem}
  .card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
        border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
  .card.APPROVED{border-color:#a8d3ba}
  .card.DENIED{border-color:#e8b9b1}
  .shot{position:relative;aspect-ratio:16/9;background:#101014}
  .shot img{width:100%;height:100%;object-fit:cover}
  .badge{position:absolute;top:.5rem;left:.5rem;background:rgba(255,255,255,.94);border-radius:99px;
         font-size:var(--t-label);font-weight:600;letter-spacing:.05em;padding:.2rem .5rem;text-transform:uppercase;color:var(--dim)}
  .badge.APPROVED{color:var(--ok)} .badge.DENIED{color:var(--no)}
  .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
        font-size:2.1rem;color:rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none}
  .aud{height:4.6rem;display:flex;align-items:center;background:var(--sunk);gap:.6rem;padding:0 .85rem;border-bottom:1px solid var(--line)}
  .aud .wave{flex:1;height:2rem;display:flex;align-items:center;gap:2px;overflow:hidden}
  .aud .wave i{flex:1;background:var(--line2);border-radius:1px}
  .body{padding:.75rem .85rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
  .fn{font-size:var(--t-body);font-weight:600;margin:0;overflow-wrap:anywhere}
  .fp{font-size:var(--t-xs);color:var(--faint);margin:.1rem 0 0;overflow-wrap:anywhere}
  .prov{align-self:flex-start;background:none;border:0;padding:.2rem 0;font-size:var(--t-xs);
        font-weight:500;color:var(--dim);cursor:pointer;min-height:2rem;text-decoration:underline;text-underline-offset:3px}
  .provbox{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:.7rem .75rem;
           font-size:var(--t-xs);line-height:1.6}
  .provbox p{margin:0 0 .4rem} .provbox p:last-child{margin-bottom:0}
  .provbox .k{color:var(--faint);text-transform:uppercase;font-size:var(--t-label);font-weight:600;margin-right:.3rem}
  .provbox .pr{border-left:2px solid var(--line2);padding-left:.6rem;white-space:pre-wrap;color:var(--dim)}
  .provbox .inh{background:var(--no-soft);border-left:2px solid #d9a79d;padding:.4rem .6rem;color:#7c3b31;border-radius:0 4px 4px 0}
  .provbox .none{color:var(--faint);font-style:italic}
  .log{list-style:none;margin:0;padding:0;font-size:var(--t-xs);color:var(--faint);line-height:1.55}
  .acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
  .acts button{flex:1 1 auto;border:1px solid transparent;border-radius:6px;padding:.55rem .8rem;
    min-height:var(--tap);font-size:var(--t-sm);font-weight:600;cursor:pointer}
  .b-del{background:var(--surface);border-color:#e0b3ad;color:var(--no)}
  .b-ok{background:var(--ok-soft);border-color:#a8d3ba;color:var(--ok)}
  .b-no{background:var(--no-soft);border-color:#e8b9b1;color:var(--no)}
  .acts button:active{transform:translateY(1px)}
  .acts input{flex:1 1 100%;background:var(--surface);border:1px solid var(--line);border-radius:6px;
    padding:.55rem .65rem;min-height:var(--tap)}
  .acts input::placeholder{color:var(--faint)}
  .settled{font-size:var(--t-xs);color:var(--faint)}

  /* ---------- tales ---------- */
  .tlist{display:grid;gap:.7rem}
  .trow{display:block;width:100%;text-align:left;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);
        border-radius:var(--r);padding:.85rem;cursor:pointer;box-shadow:var(--shadow);font-family:inherit}
  .trow h3{font-size:1rem}
  .trow .meta{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
  .trow .sub{margin:.35rem 0 0;font-size:var(--t-xs);color:var(--faint)}
  .tbl{display:none}
  /* A LABEL pill. inline-flex so the text centres whatever the height ends up being — it was
     inline-block, and a min-height added further down by the CONTROL pill rule left the glyph
     sitting 6px from the top and 14px from the bottom. */
  .pill{display:inline-flex;align-items:center;border-radius:99px;padding:.18rem .55rem;font-size:var(--t-label);
        font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent}
  .pill.pub{background:var(--ok-soft);color:var(--ok);border-color:#c3e2ce}
  .pill.draft{background:var(--sunk);color:var(--dim);border-color:var(--line2)}
  .pill.rate{background:var(--accent-soft);color:var(--accent);border-color:#eccfcf}
  .pill.hid{background:var(--sunk);color:var(--faint);border-color:var(--line2)}
  .pill.shelf{background:var(--surface);color:var(--dim);border-color:var(--line)}

  /* ---------- editor ---------- */
  .etabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
  .etabs a .n{margin-left:.4rem;color:var(--faint);font-variant-numeric:tabular-nums}
  /* Two numbers doing two jobs: muted = how many are in here, red = how many need you. */
  .etabs a .nb{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;margin-left:.3rem;
    padding:0 .28rem;border-radius:999px;background:var(--accent);color:#fff;
    font-size:var(--t-label);font-weight:700;line-height:1;vertical-align:middle}
  .etabs::-webkit-scrollbar{display:none}
  .etabs a{flex:none;white-space:nowrap;text-decoration:none;display:inline-block;background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
    font-size:var(--t-sm);font-weight:500;padding:.55rem .8rem .5rem;min-height:var(--tap);cursor:pointer}
  .etabs a.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
  .ed{display:grid;gap:1rem;grid-template-columns:1fr}
  .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.9rem;box-shadow:var(--shadow)}
  .box h3{margin:0 0 .75rem;font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600}
  label.f{display:block;margin-bottom:.8rem}
  label.f>span{display:block;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;
               color:var(--faint);font-weight:600;margin-bottom:.3rem}
  label.f input,label.f select,label.f textarea{width:100%;background:var(--surface);border:1px solid var(--line2);
    border-radius:6px;padding:.6rem .65rem;min-height:var(--tap);font-size:var(--t-body)}
  label.f input:focus,label.f select:focus,label.f textarea:focus{outline:2px solid #c9a0a0;outline-offset:-1px;border-color:var(--accent)}
  label.f small{display:block;margin-top:.3rem;font-size:var(--t-xs);color:var(--faint)}
  .check{display:flex;gap:.6rem;align-items:center;font-size:var(--t-sm);color:var(--dim);min-height:var(--tap)}
  .check input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  /* Covers are portrait — 2:3, the shape the site actually uses. Square crops of 16:9 renders
     turned every candidate into an unreadable colour block. */
  .coverpick{display:grid;gap:.7rem}
  .covernow{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.8rem;
            padding-bottom:.8rem;border-bottom:1px solid var(--line)}
  .covermeta{min-width:0;flex:1}
  .covernow img{width:4.5rem;aspect-ratio:2/3;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
  .covernone{width:4.5rem;aspect-ratio:2/3;border:1px dashed var(--line2);border-radius:6px;
    display:flex;align-items:center;justify-content:center;font-size:var(--t-label);color:var(--faint);text-align:center;padding:.3rem}
  .covermeta .cn{margin:0;font-size:var(--t-sm);font-weight:600;overflow-wrap:anywhere;line-height:1.3}
  .covermeta .cs{margin:.2rem 0 .55rem;font-size:var(--t-xs);color:var(--faint);overflow-wrap:anywhere;line-height:1.4}
  .covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.5rem;padding:.15rem}
  .covers button{padding:0;border:2px solid var(--line);border-radius:6px;background:var(--surface);
                 cursor:pointer;overflow:hidden;text-align:left}
  .covers button.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(138,26,32,.15)}
  .covers img{width:100%;aspect-ratio:2/3;object-fit:cover}
  /* Filenames wrap to two lines rather than truncating — an ellipsised render name tells you
     nothing, and these are exactly the names you pick by. */
  .covers span{padding:.3rem .35rem;font-size:var(--t-label);color:var(--dim);line-height:1.25;
               overflow-wrap:anywhere;min-height:2.5em;   /* two lines always, so rows align */
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .covers button{display:flex;flex-direction:column}
  .covers.wide{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
  .covers.wide img{aspect-ratio:16/9}
  .covers button{position:relative}
  .audtile{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--sunk);
           border-bottom:1px solid var(--line);padding:0 .5rem}
  .audtile .wave{display:flex;align-items:center;gap:2px;width:100%;height:45%}
  .audtile .wave i{flex:1;background:var(--line2);border-radius:1px}
  .cliptag{position:absolute;top:.3rem;right:.3rem;background:rgba(255,255,255,.94);border-radius:99px;
           padding:.1rem .4rem;font-size:var(--t-label);font-weight:600;color:var(--dim);
           text-transform:uppercase;letter-spacing:.04em}
  .edwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  /* The toolbar FITS rather than scrolls: glyphs on a phone, words once there is room. */
  .toolbar{display:flex;gap:.1rem;align-items:center;border-bottom:1px solid var(--line);
           padding:.3rem .35rem;background:var(--sunk)}
  .toolbar button{flex:1 1 0;min-width:0;background:none;border:0;border-radius:6px;color:var(--dim);
    font-size:var(--t-body);font-weight:500;padding:.45rem .2rem;min-height:var(--tap);cursor:pointer}
  .toolbar .lbl{display:none}
  .toolbar .ico{font-size:1.05em}
  .toolbar button:active{background:var(--line)}
  .toolbar button.on{background:var(--text);color:#fff}
  .toolbar .deskonly{display:none}          /* the phone row stays at seven controls */
  .toolbar .sep{flex:0 0 1px;width:1px;height:1.1rem;background:var(--line2);margin:0 .22rem}
  #editor{min-height:21rem;padding:1.1rem 1rem;outline:none;font-family:var(--prose);
          font-size:1.02rem;line-height:1.75;color:#26262a}
  #editor p{margin:0 0 .95em}
  /* A chapter title, styled the way he already writes one — he stacked bold + italic + underline
     to build this, because Wattpad gave him no heading control. Now it is one button. */
  #editor h2{font-family:var(--prose);font-size:1.1rem;font-weight:700;margin:1.5em 0 .55em;
             text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px}
  #editor h2:first-child{margin-top:0}
  /* Scene break — the beat gap he currently types as consecutive blank lines. */
  #editor .scenebreak{margin:1.5em 0;height:1.2rem;display:flex;align-items:center;justify-content:center;
                      user-select:none;-webkit-user-select:none}
  /* word-spacing, not letter-spacing — the latter leaves a trailing gap that throws off centring. */
  #editor .scenebreak::before{content:"✳ ✳ ✳";font-size:.72rem;word-spacing:.5rem;
                              margin-right:-.5rem;color:var(--faint)}   /* kill the trailing space */
  .edstatus{font-size:var(--t-xs);color:var(--faint);padding:.5rem .7rem;border-top:1px solid var(--line);margin:0;background:var(--sunk)}
  .edstatus #wc{font-variant-numeric:tabular-nums}
  #f-title{width:100%;background:none;border:0;font-size:1.35rem;font-weight:600;
           letter-spacing:-.01em;outline:none;padding:0;font-family:inherit}

  /* Actions ride along the page header, right-aligned — present without competing with the
     content. They never wrap onto a row of their own, which is what made them feel oversized. */
  .head{display:flex;gap:.7rem;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}
  .headacts{flex:none;display:flex;gap:.5rem;align-items:center}
  .saved{font-size:var(--t-xs);color:var(--faint);white-space:nowrap;transition:opacity .2s}
  .saved.on{color:var(--ok)}
  .btn{border:1px solid transparent;border-radius:6px;padding:.6rem .9rem;min-height:var(--tap);
       font-size:var(--t-sm);font-weight:600;cursor:pointer;background:var(--text);color:#fff}
  .btn.ghost{background:var(--surface);border-color:#e0b3ad;color:var(--no)}
  .btn.danger{color:var(--no);border-color:var(--line2)}
  .btn.danger:hover{border-color:#e0b3ad;background:var(--no-soft)}
  .btn.quiet{background:var(--surface);border-color:var(--line2);color:var(--dim);font-weight:500;padding:.45rem .6rem;min-height:2.3rem}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .stat{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.8rem .85rem;
        cursor:pointer;text-align:left;font-family:inherit;box-shadow:var(--shadow)}
  .stat:hover{border-color:var(--line2)}
  .stat b{display:block;font-size:1.6rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
  .stat span{font-size:var(--t-xs);color:var(--dim)}
  .queue{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;border-color:#e3c98a;background:var(--amber-soft)}
  .queue b{font-size:1.5rem;color:#7a5210}
  .queue span{color:#7a5210;font-weight:500}
  /* ---------- computed facts ---------- */
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .fact{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:.55rem .65rem;min-width:0}
  .fact b{display:block;font-size:1.15rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
  .fact span{display:block;font-size:var(--t-label);color:var(--dim);margin-top:.1rem}

  /* ---------- tag picker ---------- */
  .picker{margin-bottom:1.1rem}
  .pklabel{margin:0 0 .4rem;font-size:var(--t-xs);font-weight:600}
  .pklabel em{display:block;font-style:normal;font-weight:400;color:var(--faint);font-size:var(--t-label)}
  .pkheld{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.45rem;min-height:1.9rem;align-items:center}
  .pknone{font-size:var(--t-xs);color:var(--faint);font-style:italic}
  .pkchip{display:inline-flex;align-items:center;gap:.3rem;background:var(--sunk);
    border:1px solid var(--line2);border-radius:999px;padding:.28rem .3rem .28rem .7rem;font-size:var(--t-xs)}
  /* Held = created here, not yet a public filter. Visibly different, never hidden. */
  .pkchip.held{border-style:dashed;color:var(--dim)}
  .pkchip i{font-style:normal;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em;
    color:var(--amber);background:var(--amber-soft);border-radius:3px;padding:.05rem .3rem}
  .pkchip button{border:0;background:none;cursor:pointer;color:var(--faint);font-size:1rem;
    line-height:1;padding:.2rem .35rem;min-height:auto}
  .pkchip button:hover{color:var(--no)}
  .pkbox{position:relative}
  .pkinput{width:100%;min-height:var(--tap);padding:.5rem .7rem;border:1px solid var(--line2);
    border-radius:6px;background:var(--surface);font-size:var(--t-sm)}
  .pkinput:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(20,20,25,.07)}
  .pkmenu{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:.25rem;
    list-style:none;background:var(--surface);border:1px solid var(--line2);border-radius:8px;
    box-shadow:0 8px 24px rgba(20,20,25,.14);max-height:15rem;overflow:auto}
  .pkmenu li{margin:0}
  .pkmenu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
    padding:.5rem .6rem;border-radius:5px;font-size:var(--t-sm);min-height:var(--tap)}
  .pkmenu button:hover{background:var(--sunk)}
  .pkmenu button em{display:block;font-style:normal;font-size:var(--t-label);color:var(--faint)}
  .pkmenu button i{font-style:normal;font-size:var(--t-label);text-transform:uppercase;
    letter-spacing:.06em;color:var(--amber);margin-left:.4rem}
  .pkmake button{color:var(--accent);font-weight:600}
  .pknone2{padding:.5rem .6rem;font-size:var(--t-xs);color:var(--faint)}

  /* ---------- taxonomy table ---------- */
  .txwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
          box-shadow:var(--shadow);overflow-x:auto}
  /* Phone: every row is a card. As a scrolling table, Merge and Delete sat off the right edge —
     the two actions the page exists for were the two you could not reach. */
  table.tx{width:100%;border-collapse:collapse}
  table.tx thead{display:none}
  table.tx tbody,table.tx tr,table.tx td{display:block}
  table.tx tr{display:grid;grid-template-columns:1fr auto;column-gap:.6rem;
              padding:.75rem .8rem;border-bottom:1px solid var(--line)}
  table.tx td{border:0;padding:0}
  table.tx td:nth-child(1){grid-column:1;grid-row:1;min-width:0}
  table.tx td:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
  table.tx td:nth-child(2){grid-column:1/-1;grid-row:2;text-align:left;margin-top:.2rem}
  table.tx td:nth-child(4){grid-column:1/-1;grid-row:3;margin-top:.55rem;justify-content:flex-start}
  .txn em{font-style:normal}
  .qrow{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;min-height:var(--tap)}
  table.tx th{text-align:left;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.07em;
    color:var(--faint);font-weight:600;padding:.55rem .7rem;border-bottom:1px solid var(--line)}
  .txlabel{display:block;font-size:var(--t-sm)}
  .txslug{display:inline-block;font-size:var(--t-label);color:var(--faint);font-family:ui-monospace,monospace}
  .txhint{display:block;font-size:var(--t-label);color:var(--faint);font-style:italic}
  .txn{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
  .txnone{color:var(--faint);font-style:italic;font-size:var(--t-xs)}
  .txacts{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
  .txwrap{overflow:visible}
  .mini{background:var(--surface);border:1px solid var(--line2);border-radius:6px;color:var(--dim);
    font-size:var(--t-label);font-weight:500;padding:.35rem .55rem;min-height:2.1rem;cursor:pointer;white-space:nowrap}
  .mini:hover{border-color:var(--text);color:var(--text)}
  .mini.danger:hover{border-color:#e0b3ad;color:var(--no);background:var(--no-soft)}
  .mini[disabled]{opacity:.4;cursor:default}
  /* Public vs held is the whole point of the page, so it is a switch, not a label. */
  /* A CONTROL pill — clickable, so it needs a tap target. Scoped to buttons so it stops resizing
     every label pill on the site. */
  button.pill{border-radius:999px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--t-label);font-weight:600;padding:.3rem .7rem;min-height:var(--tap);white-space:nowrap}
  .pill.on{background:var(--ok-soft);border-color:#a8d3ba;color:var(--ok)}
  .pill.off{background:var(--amber-soft);border-color:#e3c98a;color:#7a5210;border-style:dashed}

  /* ---------- audience ---------- */
  .warnline,.okline{font-size:var(--t-xs);border-radius:6px;padding:.5rem .6rem;margin:.2rem 0 .6rem;line-height:1.5}
  .warnline{background:var(--no-soft);border:1px solid #e8b9b1;color:#7c3b31}
  .okline{background:var(--ok-soft);border:1px solid #a8d3ba;color:var(--ok)}
  .warnline code,.okline code{font-family:ui-monospace,monospace;font-size:.95em}
  /* Rates drawn against Amazon's real thresholds — the marker is the target, the bar ends at the
     value that pauses the account. */
  .hrow{margin-bottom:1.1rem} .hrow:last-child{margin-bottom:0}
  .hlab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
  .hlab b{font-size:var(--t-sm)}
  .hlab span{font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:600}
  .htrack{position:relative;height:8px;background:var(--sunk);border:1px solid var(--line);border-radius:99px;overflow:hidden}
  .htrack i{display:block;height:100%;min-width:2px;border-radius:99px}
  .htrack i.good{background:var(--ok)} .htrack i.warn{background:var(--amber)} .htrack i.bad{background:var(--no)}
  .hmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--faint)}
  .hnote{margin-top:.3rem;font-size:var(--t-label);color:var(--faint)}

  /* ---------- faceted filter rows (shared by Tales and Taxonomy) ---------- */
  .frow2{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-bottom:.55rem}
  .flab{flex:0 0 100%;font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase;
        color:var(--faint);font-weight:600;margin-bottom:.1rem}
  .fchip{display:inline-flex;align-items:center;text-decoration:none;background:var(--surface);
    border:1px solid var(--line);border-radius:99px;color:var(--dim);font-size:var(--t-xs);
    font-weight:500;padding:.4rem .7rem;min-height:var(--tap);white-space:nowrap}
  .fchip .c{margin-left:.4rem;color:var(--faint);font-variant-numeric:tabular-nums}
  .fchip.on{background:var(--text);border-color:var(--text);color:#fff;font-weight:600}
  .fchip.on .c{color:rgba(255,255,255,.72)}
  .fchip.warn.on{background:var(--accent);border-color:var(--accent)}
  .fchip.dead{opacity:.38;pointer-events:none}
  .fchip:hover{border-color:var(--line2)}
  .libcount2{margin:0 0 .8rem;font-size:var(--t-xs);color:var(--dim)}
  .toolrow2{display:grid;gap:.5rem;margin-bottom:.7rem}
  .ftoggle{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;min-height:var(--tap);
    padding:0 .9rem;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);
    color:var(--dim);font-size:var(--t-sm);font-weight:500;cursor:pointer}
  .ftoggle .caret{transition:transform .18s}
  .ftoggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
  .fcount{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .28rem;
    border-radius:999px;background:var(--text);color:#fff;font-size:var(--t-label);font-weight:700}
  /* Collapsed on a phone; the script opens it when it was left open this session. */
  .fpanel{display:none;padding:.85rem .9rem .3rem;background:var(--sunk);
          border:1px solid var(--line);border-radius:var(--r);margin-bottom:1rem}
  .fpanel.open{display:block}
  .pill.warn{background:var(--accent-soft);border:1px solid #e6c9cb;color:var(--accent)}
  @media (min-width:600px){ .flab{flex:0 0 5.5rem;margin-bottom:0} }
  /* From 1200 the filters stop costing height and take the width that is already spare. */
  @media (min-width:1200px){
    .fgrid{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.5rem;align-items:start}
    .fpanel{display:block;position:sticky;top:1rem;background:none;border:0;padding:0;margin:0}
    .ftoggle{display:none}
    .fpanel .frow2{display:block;margin-bottom:1.1rem}
    .fpanel .flab{flex:none;display:block;margin-bottom:.4rem}
    .fpanel .fchip{margin:0 .3rem .3rem 0}
    .fmain{min-width:0}
  }

  /* ---------- confirm dialog ---------- */
  dialog.ask{border:0;padding:0;max-width:26rem;width:calc(100% - 2rem);border-radius:var(--r);
    background:var(--surface);color:var(--text);box-shadow:0 18px 50px rgba(20,20,25,.28);
    padding:1.15rem 1.2rem 1.05rem}
  dialog.ask::backdrop{background:rgba(20,20,25,.45);backdrop-filter:blur(2px)}
  dialog.ask h2{font-size:1.05rem;margin-bottom:.4rem}
  dialog.ask p{font-size:var(--t-sm);color:var(--dim);line-height:1.55;margin-bottom:1rem}
  dialog.ask .askacts{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
  dialog.ask .askacts .btn{flex:1 1 auto;min-width:7rem}
  @media (min-width:480px){ dialog.ask .askacts .btn{flex:0 0 auto} }
  dialog.ask.form{max-width:24rem}
  dialog.ask.form .f{display:grid;gap:.25rem;margin-bottom:1rem}
  dialog.ask.form .f > span{font-size:var(--t-xs);font-weight:600}
  dialog.ask.form input,dialog.ask.form select{width:100%;min-height:var(--tap);padding:.5rem .7rem;
    border:1px solid var(--line2);border-radius:6px;background:var(--surface);font-size:var(--t-sm)}
  dialog.ask.form input:focus,dialog.ask.form select:focus{outline:none;border-color:var(--text);
    box-shadow:0 0 0 3px rgba(20,20,25,.07)}
  dialog.ask.form small{font-size:var(--t-label);color:var(--faint);min-height:1.1em;font-family:ui-monospace,monospace}
  dialog.ask.danger .btn.ghost{background:var(--no-soft);border-color:#e0b3ad;color:var(--no)}
  dialog.ask.danger .btn.ghost:hover{background:var(--no);border-color:var(--no);color:#fff}

  .empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
         padding:2.5rem 1rem;text-align:center;color:var(--faint);font-size:var(--t-sm)}

  /* ---------- reach ----------
     Channel colours are the only place this admin uses hue to carry meaning, so they have to hold
     up as 8px dots and as thin bar segments. The site gets the brand crimson: it is his. */
  .ch-site{background:#8a1a20} .ch-wattpad{background:#d2701e}
  .ch-youtube{background:#2a6b73} .ch-tiktok{background:#39404d}
  /* YouTube is teal rather than its brand red on purpose — next to the site's crimson at 6px
     tall, two dark reds are one colour. Telling the segments apart beats brand fidelity here. */
  .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.3rem;
       vertical-align:baseline;flex:none}

  /* Grid, not flex — the trend needs a SHARE of the row, not a fixed sliver. As a fixed 5.5rem
     strip it read as an afterthought next to a hero card four times its width. */
  .reach{display:grid;grid-template-columns:minmax(0,1fr) 6.5rem;gap:.6rem;align-items:stretch}
  .rhero{min-width:0;background:var(--surface);border:1px solid var(--line);
         border-radius:var(--r);box-shadow:var(--shadow);padding:.85rem .9rem}
  .rhero b{display:block;font-size:2.1rem;line-height:1.05;font-weight:600;font-variant-numeric:tabular-nums}
  .rhero>span{display:block;font-size:var(--t-sm);color:var(--dim);margin-top:.1rem}
  .rhero small{display:block;font-size:var(--t-xs);color:var(--faint);margin-top:.45rem}
  .rtrend{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
          box-shadow:var(--shadow);padding:.85rem .7rem;display:flex;flex-direction:column;justify-content:flex-end}
  .rtrend small{font-size:var(--t-label);color:var(--faint);margin-top:.4rem;text-align:center}
  /* flex:1 so the columns fill the card instead of hugging the floor of it — the card is sized by
     the hero next to it, and a chart floating in dead space reads as decoration. */
  .spark{display:flex;align-items:flex-end;gap:2px;flex:1;min-height:2.6rem}
  .spark i{flex:1;background:var(--line2);border-radius:1px}
  .spark i:last-child{background:var(--accent)}

  .chans{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.6rem}
  .chan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
        padding:.55rem .65rem;box-shadow:var(--shadow);min-width:0}
  .chan.ours{border-color:#e6c9cb;background:var(--accent-soft)}
  .chan .cl{display:flex;align-items:center;font-size:var(--t-xs);color:var(--dim);
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chan .cl em{font-style:normal;font-size:var(--t-label);color:var(--accent);margin-left:.35rem;
               text-transform:uppercase;letter-spacing:.06em}
  .cn2{display:flex;align-items:baseline;gap:.35rem;margin-top:.15rem}
  .cn2 b{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
  .up{font-style:normal;font-size:var(--t-xs);font-weight:600;color:var(--ok)}

  .topline{margin:.9rem 0 .5rem;font-size:var(--t-sm);color:var(--dim)}
  .topline b{color:var(--text)}

  /* The leaderboard. Rank is the point — at 126 total reads "which tale works" is the only
     number that tells him anything, so the ordering does the work and the total is incidental. */
  .rlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
         box-shadow:var(--shadow);overflow:hidden}
  .rrow{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;text-decoration:none;
        color:inherit;border-bottom:1px solid var(--line)}
  .rrow:last-child{border-bottom:0}
  .rn{flex:none;width:1.1rem;text-align:right;font-size:var(--t-xs);color:var(--faint);
      font-variant-numeric:tabular-nums;padding-top:.15rem}
  .rmain{flex:1;min-width:0}
  .rtop{display:flex;align-items:baseline;gap:.6rem;justify-content:space-between}
  .rt{font-size:var(--t-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rnum{flex:none;display:flex;align-items:baseline;gap:.3rem;font-size:var(--t-sm);
        font-weight:600;font-variant-numeric:tabular-nums}
  .rbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:.35rem 0 .3rem;
        background:var(--line);min-width:6px}
  .rbar i{display:block}
  .rmeta{display:flex;flex-wrap:wrap;gap:.1rem .6rem;font-size:var(--t-label);color:var(--faint)}
  .rmeta>span{display:flex;align-items:center;white-space:nowrap}
  .rage{margin-left:auto}

  /* The queue: a derived to-do, not a scoreboard. Counts of things do not move work forward —
     the next action does. */
  .queue2{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
  .queue2 li{border-bottom:1px solid var(--line)}
  .queue2 li:last-child{border-bottom:0}
  .queue2 a{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;min-height:var(--tap);
            text-decoration:none;color:inherit}
  .queue2 b{flex:none;min-width:1.6rem;text-align:center;font-size:1.05rem;font-weight:600;
            font-variant-numeric:tabular-nums}
  .queue2 span{flex:1;font-size:var(--t-sm);color:var(--dim)}
  .queue2 em{flex:none;font-style:normal;color:var(--faint)}
  .queue2 li.hot{background:var(--amber-soft)}
  .queue2 li.hot b,.queue2 li.hot span{color:#7a5210}
  .queue2 li.hot span{font-weight:500}
  .back{display:inline-block;text-decoration:none;font-size:var(--t-sm);color:var(--dim);cursor:pointer;
        padding:.4rem 0;min-height:2.2rem;font-weight:500}
  .tlink{color:var(--text);font-weight:600;cursor:pointer;text-decoration:none}
  .tlink:hover{text-decoration:underline}
  .tlink:hover{color:var(--accent)}
  .tools{display:grid;gap:.5rem;margin-bottom:.7rem}
  .search,.sortsel{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:6px;
    padding:.55rem .65rem;min-height:var(--tap);font-size:var(--t-sm)}
  .bulk{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--amber-soft);
    border:1px solid #f0e2c4;border-radius:var(--r);padding:.5rem .7rem;margin-bottom:.7rem;font-size:var(--t-sm)}
  .bulk span{color:#6b5416}
  .pv{position:relative}
  .pick{position:absolute;top:.45rem;right:.45rem;background:rgba(255,255,255,.94);border-radius:6px;
    padding:.3rem;display:flex;box-shadow:var(--shadow);cursor:pointer}
  .pick input{width:1.05rem;height:1.05rem;accent-color:var(--accent);margin:0}
  .inuse{position:absolute;bottom:.45rem;right:.45rem;background:rgba(255,255,255,.94);border-radius:99px;
    font-size:var(--t-label);font-weight:600;color:var(--ok);padding:.15rem .5rem;text-transform:uppercase;letter-spacing:.04em}
  .card.picked{border-color:var(--accent);box-shadow:0 0 0 2px rgba(138,26,32,.14)}
  .cap{margin:.25rem 0 0;font-size:var(--t-xs);color:var(--dim);font-style:italic}
  .scrim{position:fixed;inset:0;background:rgba(20,20,25,.4);z-index:50}
  .drawer{position:fixed;left:0;right:0;bottom:0;max-height:88vh;background:var(--surface);z-index:51;
    border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(20,20,25,.2);display:flex;flex-direction:column}
  .dhead{display:flex;gap:.7rem;align-items:center;justify-content:space-between;
    padding:.8rem .9rem;border-bottom:1px solid var(--line)}
  .dhead .fn{margin:0;overflow-wrap:anywhere}
  .dbody{padding:.9rem;overflow-y:auto}
  .dimg{width:100%;border-radius:6px;border:1px solid var(--line)}
  .facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:.9rem 0 0;font-size:var(--t-xs)}
  .facts dt{color:var(--faint);text-transform:uppercase;font-size:var(--t-label);font-weight:600}
  .facts dd{margin:0;overflow-wrap:anywhere}
  .dprompt{margin:.8rem 0 0;font-size:var(--t-xs);color:var(--dim);border-left:2px solid var(--line2);padding-left:.6rem;white-space:pre-wrap}
  .dnote{margin:.6rem 0 0;font-size:var(--t-xs);color:var(--dim)}
  .usage{margin-top:.9rem}
  .usage h4{margin:0 0 .3rem;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
  .usage ul{margin:0;padding-left:1.1rem;font-size:var(--t-sm)}
  .usage .none{margin:0;font-size:var(--t-sm);color:var(--faint)}
  .dacts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
  .dacts button{flex:1 1 auto;border:1px solid transparent;border-radius:6px;padding:.55rem .8rem;
    min-height:var(--tap);font-size:var(--t-sm);font-weight:600;cursor:pointer}
  #buildfoot{padding:0 .9rem 2rem;font-size:var(--t-label);color:var(--faint);text-align:center}
  #build{font-variant-numeric:tabular-nums}
  .hide{display:none !important}

  @media (min-width:600px){
    .grid{grid-template-columns:1fr 1fr}
    .stats{grid-template-columns:repeat(3,1fr)}
    .facts{grid-template-columns:repeat(3,1fr)}
    /* Once there is room, back to a real table — it compares better across many rows. */
    table.tx thead{display:table-header-group}
    table.tx tbody{display:table-row-group}
    table.tx tr{display:table-row;padding:0}
    table.tx td{display:table-cell;padding:.6rem .7rem;vertical-align:middle;border-bottom:1px solid var(--line)}
    table.tx tbody tr:last-child td{border-bottom:0}
    table.tx td:nth-child(2){text-align:right;margin:0}
    table.tx td:nth-child(4){margin:0}
    .txacts{justify-content:flex-end}
    .txn em{display:none}
    .chans{grid-template-columns:repeat(4,1fr)}
    /* Once there is room the trend earns a real share of the row and the bars get tall enough
       to read as a chart rather than a decoration. */
    .reach{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
    /* Columns are capped and centred rather than stretched to fill. Eight bars across a 490px
       card come out nearly square, which reads as a row of tiles instead of a trend. */
    .spark{gap:6px;justify-content:center}
    .spark i{max-width:1.9rem;border-radius:2px}
    main{padding:1.5rem 1.3rem 4rem}
    /* Cap the MEASURE, not the editor — the whole card stays clickable, so a click in the gutter
       still puts the caret on the nearest line. ~90 characters: past that the eye starts missing
       its target on the return sweep, which is how you lose your place while revising. Below this
       breakpoint the line is already shorter than the cap, so the rule simply never bites.
       Child selectors, not `#editor>*` — the base `#editor p` / `#editor h2` rules set their own
       margins and would otherwise outspecify the auto centring, pinning the column left. */
    #editor>p,#editor>h2,#editor>.scenebreak{max-width:38rem;margin-left:auto;margin-right:auto}
  }
  @media (min-width:900px){
    :root{--tap:2.3rem}
    .bar{max-width:1360px;margin:0 auto;padding:.6rem 1.5rem;gap:1.5rem}
    header.top>nav.main{max-width:1360px;margin:0 auto;padding:0 1.5rem}
    main{max-width:1360px;margin:0 auto;padding:1.7rem 1.5rem 4rem}
    .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
    .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
    .queue{grid-column:1/-1}
    .tabs .div{width:1px;height:auto;background:var(--line);margin:.35rem .3rem}
    .tlist{display:none}
    .tbl{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
         overflow:hidden;box-shadow:var(--shadow)}
    table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
    th{text-align:left;font-size:var(--t-label);letter-spacing:.07em;text-transform:uppercase;
       color:var(--faint);font-weight:600;padding:.7rem .85rem;border-bottom:1px solid var(--line);background:var(--sunk)}
    td{padding:.7rem .85rem;border-bottom:1px solid var(--line)}
    tbody tr:last-child td{border-bottom:0}
    tbody tr:hover td{background:var(--sunk)}
    .tools{grid-template-columns:1fr 12rem}
    .drawer{left:auto;top:0;bottom:0;width:26rem;max-height:none;border-radius:0}
    .ed{grid-template-columns:1fr 1fr;gap:1.3rem}
    .toolbar button{flex:none;padding:.45rem .7rem}
    .toolbar .lbl{display:inline} .toolbar .ico{display:none}
    .toolbar .deskonly{display:inline-block}
    #editor{padding:1.4rem 2rem;font-size:1.06rem}
    #editor h2{font-size:1.25rem}
  }
  .queue{grid-column:1/-1}
  .queue span{display:inline;margin-left:.4rem}