/* ============================================================================
   Shipshape Enquiries, application styles.

   Structure over decoration: a persistent sidebar, one page header pattern, a
   dense list that stays usable at 200 rows, and a detail panel for the record
   you are actually working on. Brand tokens are Shipshape's, the layout
   conventions are the ones people already know from other tools.
   ========================================================================== */

:root{
  --dark:#202020; --white:#fff; --cream:#F7F6F3; --cream-2:#EFEBE3;
  --pink:#FD939F; --pink-lt:#FFB3BC; --pink-wash:rgba(253,147,159,.12);
  --ink:#1C1C1C; --dim:#6A6560; --faint:#9C968E;
  --rule:rgba(28,28,28,.10); --rule-2:rgba(28,28,28,.18);
  --ok:#2E7D5B; --ok-w:rgba(46,125,91,.10);
  --warn:#A9711A; --warn-w:rgba(169,113,26,.12);
  --bad:#B3453F; --bad-w:rgba(179,69,63,.10);
  --sans:'Poppins',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --r:10px; --side-w:232px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
     font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.015em;color:var(--ink)}
p{margin:0}
button,input,textarea,select{font:inherit}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:var(--side-w);flex:none;background:var(--dark);color:#E9E5DF;
      display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 22px}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--white);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:8px;border-radius:3px;background:var(--pink)}
.side-brand-t{display:flex;flex-direction:column;font-weight:600;font-size:14.5px;line-height:1.2;color:#fff}
.side-brand-t small{font-weight:400;font-size:11px;color:#8C867E;letter-spacing:.02em}

.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1}
.sn{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
    text-decoration:none;color:#B4AEA6;font-size:13.5px;transition:background .15s,color .15s}
.sn:hover{background:rgba(255,255,255,.06);color:#fff}
.sn.on{background:rgba(255,255,255,.10);color:#fff;font-weight:500}
.sn-ic{width:17px;height:17px;flex:none;display:block}
.sn-ic svg{width:100%;height:100%;display:block}
.sn.on .sn-ic{color:var(--pink)}
.sn-l{flex:1}
.sn-b{background:var(--pink);color:var(--dark);font-size:11px;font-weight:700;
      min-width:19px;text-align:center;padding:1px 6px;border-radius:20px}
.sn-sm{padding:7px 11px;font-size:12.5px}

.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.side-user{display:flex;align-items:center;gap:10px;padding:6px 11px 10px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--pink);color:var(--dark);
        display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none}
.side-user-t{display:flex;flex-direction:column;font-size:13px;color:#fff;line-height:1.25;overflow:hidden}
.side-user-t small{font-size:11px;color:#8C867E}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
           flex-wrap:wrap;padding:26px 30px 20px;border-bottom:1px solid var(--rule);background:var(--white)}
.page-head h1{font-size:21px;font-weight:700}
.page-sub{font-size:13px;color:var(--dim);margin-top:3px}
.page-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.wrap{padding:22px 30px 60px;flex:1}
@media(max-width:860px){
  .app{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;
        justify-content:space-between;padding:0 14px}
  .side-brand{padding:12px 0}
  .side-nav{flex-direction:row;flex:0;padding:0;gap:2px}
  .side-foot{border-top:0;padding:0}
  .side-user{display:none}
  .sn-l{display:none}
  .sn-sm .sn-l{display:inline}
  .page-head,.wrap{padding-left:16px;padding-right:16px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
     border:1px solid var(--rule-2);background:var(--white);color:var(--ink);
     font-size:13px;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--dim)}
.btn-pri{background:var(--pink);border-color:var(--pink);color:var(--dark);font-weight:600}
.btn-pri:hover{background:var(--pink-lt);border-color:var(--pink-lt)}
.btn-danger{color:var(--bad);border-color:rgba(179,69,63,.3)}
.btn-danger:hover{background:var(--bad-w);border-color:var(--bad)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-plain{background:none;border:0;color:var(--dim);padding:6px 4px;cursor:pointer;font-size:13px;text-decoration:none}
.btn-plain:hover{color:var(--ink)}

/* ---------- toolbar: segmented filter + search ---------- */
.toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.seg{display:inline-flex;background:var(--cream-2);border-radius:9px;padding:3px;gap:2px}
.seg a{padding:6px 13px;border-radius:7px;font-size:13px;color:var(--dim);text-decoration:none;
       display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--white);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(28,28,28,.08)}
.seg .c{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.seg a.on .c{color:var(--dim)}
.search{display:flex;gap:7px}
.search input{padding:8px 12px;border:1px solid var(--rule-2);border-radius:8px;
              min-width:230px;background:var(--white);font-size:13px}
.search input:focus{outline:2px solid var(--pink);outline-offset:-1px}

/* ---------- list ---------- */
.list{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
/* Each row is its own grid, so an "auto" track sizes to that row's own content:
   with fr units either side, a wide account tag on one row pushed its job title
   80px away from where the row above put it. The first and last tracks are
   therefore fixed, which pins the left edge of the middle column and the right
   edge of the tags on every row. Both still shrink when the space is not there. */
.row{display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr) auto minmax(0,64px);gap:16px;
     align-items:center;padding:13px 18px;border-bottom:1px solid var(--rule);
     text-decoration:none;transition:background .12s;cursor:pointer}
.row:last-child{border-bottom:0}
.row:hover{background:var(--cream)}
.row.unread{background:var(--pink-wash)}
.row.unread:hover{background:rgba(253,147,159,.18)}
.row-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.row-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-msg{font-size:13px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-tags{display:flex;gap:6px;align-items:center}
/* An account name long enough to be unreadable in caps would otherwise widen
   this row's auto track and drag the columns out of line with the rows around
   it. The full name is one click away. */
.row-tags .tag{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.row-time{font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
/* Between the full-width layout and the stacked one there is not enough room for
   a 258px name column, a full-width tag and a readable middle column. The name
   and the tag give way first, because the middle column is the one carrying the
   information you came to the list to read. */
@media(max-width:1150px){
  .row{grid-template-columns:minmax(0,200px) minmax(0,1fr) auto minmax(0,60px)}
  .row-tags .tag{max-width:120px}
}
@media(max-width:820px){
  .row{grid-template-columns:1fr auto;gap:6px}
  .row-msg{grid-column:1/-1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* ---------- badges ---------- */
.tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
     padding:2px 8px;border-radius:20px;white-space:nowrap}
.t-new{background:var(--ok-w);color:var(--ok)}
.t-replied{background:rgba(58,74,140,.10);color:#3A4A8C}
.t-archived{background:rgba(28,28,28,.07);color:var(--dim)}
.t-spam{background:var(--bad-w);color:var(--bad)}
.t-suspect{background:var(--warn-w);color:var(--warn)}
.t-warn{background:var(--warn-w);color:var(--warn)}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:20px;align-items:start}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px}
.card + .card{margin-top:14px}
/* ...but not inside a grid row, where that margin shoves the second card
   14px below its neighbour. The grid's gap does the spacing there. */
.grid2 > .card + .card{margin-top:0}
.card h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
         font-weight:600;margin-bottom:14px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 22px}
.f{padding:11px 0;border-bottom:1px dotted var(--rule);min-width:0}
.f-k{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;line-height:1.4}
.f-v{display:block;font-size:14px;margin-top:4px;line-height:1.45;word-break:break-word}
.f-v.none{color:var(--faint);font-style:italic}
.msg{background:var(--cream);border-left:3px solid var(--pink);border-radius:0 8px 8px 0;
     padding:14px 16px;font-size:14.5px;line-height:1.65;white-space:pre-wrap}
.side-card{position:sticky;top:20px}
.stack{display:flex;flex-direction:column;gap:8px}
.stack .btn{justify-content:center;width:100%}
textarea.note{width:100%;padding:10px 12px;border:1px solid var(--rule-2);border-radius:8px;
              font-size:13.5px;resize:vertical;min-height:76px;background:var(--cream)}
textarea.note:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}

/* ---------- analytics ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px 16px}
.kpi-n{display:block;font-size:27px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-l{display:block;font-size:11.5px;color:var(--dim);margin-top:9px;letter-spacing:.02em}
.kpi.hot{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-wash)}
.kpi.hot .kpi-n{color:var(--pink)}
.kpi.bad .kpi-n{color:var(--bad)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.chart{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:4px}
/* Optional value axis: wrap .chart in .chartwrap with a .chart-y column and the
   bars get a scale (peak, midpoint, zero) plus a midline, so a quiet chart
   reads as quiet rather than broken. */
.chartwrap{display:flex;gap:8px;margin-top:4px}
.chartwrap .chart{flex:1;margin-top:0;border-bottom:1px solid var(--rule);
  background:linear-gradient(to bottom,transparent calc(50% - 1px),var(--rule) calc(50% - 1px),var(--rule) 50%,transparent 50%)}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  height:110px;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;min-width:20px}
.bar{flex:1;display:flex;align-items:flex-end;height:100%;border-radius:3px 3px 0 0;overflow:hidden}
.bar i{display:block;width:100%;background:var(--cream-2);border-radius:3px 3px 0 0}
.bar i.has{background:var(--pink)}
.chart-x{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:7px}
.srcs{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.src{display:flex;align-items:center;gap:11px;font-size:13px}
.src code{flex:0 1 auto;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
          background:var(--cream);padding:2px 7px;border-radius:5px;font-size:11.5px;font-family:var(--mono)}
.src .bar-l{flex:1;height:7px;background:var(--cream-2);border-radius:4px;overflow:hidden}
.src .bar-l i{display:block;height:100%;background:var(--pink)}
.src b{font-variant-numeric:tabular-nums;font-size:13px;min-width:22px;text-align:right}

/* ---------- forms (settings, login, accept) ---------- */
.form{display:flex;flex-direction:column;gap:15px;max-width:480px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}
.form input[type=text],.form input[type=email],.form input[type=password]{
  padding:10px 12px;border:1px solid var(--rule-2);border-radius:8px;font-size:14px;
  font-weight:400;background:var(--cream)}
.form input:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}
.form small{font-weight:400;color:var(--faint);font-size:11.5px;line-height:1.45}
.form label.chk{flex-direction:row;align-items:center;gap:9px;font-weight:400;color:var(--dim);cursor:pointer}
.form label.chk input{width:16px;height:16px;accent-color:var(--pink)}
.form .btn{align-self:flex-start}
.userrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
         padding:11px 0;border-bottom:1px solid var(--rule)}
.userrow:last-of-type{border-bottom:0}
.userrow form{margin:0}
.u-you{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--pink);font-weight:700;margin-left:7px}
.u-pending{font-size:11.5px;color:var(--faint);margin-left:8px;font-weight:400}

/* ---------- misc ---------- */
.flash{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--ok);
       border-radius:8px;padding:11px 15px;margin-bottom:16px;font-size:13.5px}
.flash.err{border-left-color:var(--bad);color:var(--bad)}
.empty{text-align:center;padding:64px 20px;color:var(--dim)}
.empty h3{font-size:16px;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--faint);max-width:38ch;margin:0 auto}
.muted{color:var(--faint);font-size:13px}
.inline{display:inline-flex;gap:7px;margin:0}
details.tech{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
details.tech summary{font-size:12.5px;color:var(--dim);cursor:pointer}
details.tech summary:hover{color:var(--ink)}

/* ---------- login / accept ---------- */
.login-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px;background:var(--cream)}
.login-card{width:100%;max-width:380px;background:var(--white);border:1px solid var(--rule);
            border-radius:14px;padding:32px 30px;box-shadow:0 24px 60px -40px rgba(0,0,0,.45)}
.login-card .brand{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:20px}
.login-card h1{font-size:20px;margin-bottom:16px}
.login-card label{display:block;font-size:13px;font-weight:600;margin-bottom:13px}
.login-card input{display:block;width:100%;margin-top:5px;padding:11px 13px;
                  border:1px solid var(--rule-2);border-radius:8px;background:var(--cream);font-size:14px}
.login-card input:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}
.login-card button{width:100%;margin-top:4px;background:var(--pink);border:0;color:var(--dark);
                   font-weight:600;padding:12px;border-radius:8px;cursor:pointer;font-size:13.5px}
.login-card button:hover{background:var(--pink-lt)}
.form-error{background:var(--bad-w);border:1px solid rgba(179,69,63,.25);color:var(--bad);
            border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}

/* ==========================================================================
   CRM: pipeline board, mini rows, stage editor
   ========================================================================== */

/* The original form rules only styled text/email/password. The CRM adds date,
   number, select and textarea, so they are brought in here rather than left
   looking like unstyled browser defaults next to the fields above. */
.form input[type=date],.form input[type=number],.form select,.form textarea{
  padding:10px 12px;border:1px solid var(--rule-2);border-radius:8px;font-size:14px;
  font-weight:400;background:var(--cream);font-family:inherit;color:var(--ink);width:100%}
.form textarea{resize:vertical;line-height:1.55}
.form select:focus,.form textarea:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:640px){.two{grid-template-columns:1fr}}

/* A board needs the room a reading column does not. */
.wrap.wide{max-width:none}

.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:14px}
.col{flex:1 0 236px;max-width:320px;background:var(--cream);border:1px solid var(--rule);border-radius:var(--r);
     display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
.col-won{background:var(--ok-w);border-color:rgba(46,125,91,.22)}
.col-lost{background:rgba(28,28,28,.04)}
.col-h{padding:12px 14px 10px;border-bottom:1px solid var(--rule);display:grid;
       grid-template-columns:1fr auto;gap:2px 8px;align-items:center}
.col-t{font-size:13px;font-weight:700;color:var(--ink)}
.col-c{font-size:11px;font-weight:700;color:var(--dim);background:var(--white);
       border:1px solid var(--rule);border-radius:20px;padding:1px 8px}
.col-v{grid-column:1/-1;font-size:11.5px;color:var(--faint)}
.col-b{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.col-e{font-size:12px;color:var(--faint);text-align:center;padding:14px 0;margin:0}

.deal{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:11px 12px;
      cursor:grab;transition:box-shadow .12s ease,opacity .12s ease}
.deal:active{cursor:grabbing}
/* Dragging a card between columns. The card fades where it was; the column it
   would land in is outlined so there is no guessing where the drop goes. */
.deal.dragging{opacity:.4;box-shadow:none}
.deal.deal-moving{opacity:.55}
.col-b.drop-on{background:var(--pink-wash);box-shadow:inset 0 0 0 2px var(--pink)}
.deal-t{display:block;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.deal-t:hover{color:var(--pink)}
.deal-m{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.4}
.deal-m a{color:var(--dim)}
.deal-m .dot{margin:0 4px;color:var(--faint)}
.deal-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px}
.deal-v{font-weight:700;color:var(--ink)}
.deal-move{margin-top:9px}
.deal-move select{width:100%;font-size:11.5px;padding:5px 7px;border:1px solid var(--rule-2);
                  border-radius:7px;background:var(--cream);font-family:inherit;color:var(--dim)}

/* Compact linked lists inside cards: deals on an account, contacts, history. */
.minirows{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:9px 0;border-bottom:1px dotted var(--rule);text-decoration:none;color:var(--ink);font-size:13px}
.mrow:last-child{border-bottom:0}
.mrow:hover .mrow-t{color:var(--pink)}
.mrow-t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow-t .muted{font-weight:400;margin-left:6px}
.mrow-v{color:var(--dim);font-size:12px;white-space:nowrap}

.t-open{background:rgba(58,74,140,.10);color:#3A4A8C}
.t-won{background:var(--ok-w);color:var(--ok)}
.t-lost{background:rgba(28,28,28,.07);color:var(--dim)}

.stages{width:100%;border-collapse:collapse;font-size:13px}
.stages th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
           color:var(--faint);font-weight:700;padding:0 8px 8px 0}
.stages td{padding:5px 8px 5px 0;border-top:1px solid var(--rule);vertical-align:middle}
.stages input,.stages select{padding:7px 9px;border:1px solid var(--rule-2);border-radius:7px;
                             font-size:13px;font-family:inherit;background:var(--cream);color:var(--ink);width:100%}
.stages input[type=number]{width:80px}
.stages td:last-child{width:1%;white-space:nowrap}
@media(max-width:760px){.stages,.stages tbody,.stages tr,.stages td{display:block;width:auto}
  .stages thead{display:none}
  .stages tr{padding:10px 0;border-top:1px solid var(--rule)}
  .stages td{border:0;padding:4px 0}}

/* ---------- activity timeline ---------- */
.tl-add{display:flex;flex-direction:column;gap:9px;align-items:flex-start;margin-bottom:20px}
.tl-add textarea{width:100%;padding:11px 13px;border:1px solid var(--rule-2);border-radius:8px;
                 font-size:13.5px;font-family:inherit;line-height:1.55;resize:vertical;background:var(--cream);color:var(--ink)}
.tl-add textarea:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}

.tl{list-style:none;margin:0;padding:0;position:relative}
/* the spine the entries hang off */
.tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.tl-i{position:relative;padding:0 0 20px 24px}
.tl-i:last-child{padding-bottom:2px}
.tl-i:before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;
             background:var(--white);border:2px solid var(--rule-2);box-sizing:border-box}
.tl-note:before,.tl-i.tl-note:before{border-color:var(--pink)}
.tl-i.tl-star:before{border-color:var(--ok);background:var(--ok)}
.tl-i.tl-arrow:before,.tl-i.tl-money:before{border-color:var(--pink);background:var(--pink)}

.tl-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tl-k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700}
.tl-on{font-size:11.5px;color:var(--dim);background:var(--cream);border-radius:20px;padding:1px 9px}
.tl-t{font-size:11.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.tl-chg{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:13px;flex-wrap:wrap}
.tl-from{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--rule-2)}
.tl-arr{color:var(--faint)}
.tl-to{font-weight:600;color:var(--ink)}
.tl-b{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.tl-b.tl-note{background:var(--cream);border-radius:8px;padding:11px 13px;white-space:normal}
.tl-w{margin-top:7px;font-size:11.5px;color:var(--faint)}

/* ---------- next step, rot, forecast, funnel ---------- */
.due{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:1px 7px;
     border-radius:20px;background:var(--cream-2);color:var(--dim);white-space:nowrap}
.due-soon{background:var(--warn-w);color:var(--warn)}
.due-over{background:var(--bad-w);color:var(--bad)}

.deal-next{display:flex;align-items:baseline;gap:7px;margin-top:8px;padding-top:8px;
           border-top:1px dotted var(--rule);font-size:11.5px;line-height:1.4}
.dn-t{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-none{color:var(--faint);font-style:italic}
.deal-cold{border-color:rgba(169,113,26,.45);background:linear-gradient(0deg,var(--warn-w),var(--warn-w)),var(--white)}
.deal-cold-t{margin-top:6px;font-size:11px;font-weight:600;color:var(--warn)}

.fc{margin-bottom:16px}
.fc-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.fc-c{flex:1 0 118px;background:var(--cream);border:1px solid var(--rule);border-radius:10px;padding:12px 13px}
.fc-c.fc-over{background:var(--bad-w);border-color:rgba(176,58,58,.28)}
.fc-c.fc-none{background:var(--white)}
.fc-l{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:700}
.fc-v{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.fc-s{display:block;font-size:11px;color:var(--dim);margin-top:5px}

.funnel{width:100%;border-collapse:collapse;font-size:13px}
.funnel th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
           font-weight:700;padding:0 10px 9px 0;border-bottom:1px solid var(--rule)}
.funnel td{padding:11px 10px 11px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.funnel tr:last-child td{border-bottom:0}
.fn-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.fn-bar{display:inline-block;width:64px;height:7px;background:var(--cream-2);border-radius:4px;
        overflow:hidden;vertical-align:middle;margin-right:8px}
.fn-bar i{display:block;height:100%;background:var(--pink)}
@media(max-width:700px){.fn-bar{width:40px}}

.rot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
     border-top:1px solid var(--rule);font-size:13px;color:var(--dim)}
.rot input{width:74px;padding:7px 9px;border:1px solid var(--rule-2);border-radius:7px;
           font-size:13px;font-family:inherit;background:var(--cream);color:var(--ink)}

.card-ask{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-wash);margin-bottom:16px}
.seg-mode{margin-bottom:16px}

/* ---------- roles ---------- */
.rolesel{padding:5px 8px;border:1px solid var(--rule-2);border-radius:7px;font-size:12px;
         font-family:inherit;background:var(--cream);color:var(--ink)}
.rolesel:disabled{opacity:.55;cursor:not-allowed}
.ro-note{display:flex;align-items:center;gap:10px;background:var(--warn-w);border:1px solid rgba(169,113,26,.28);
         border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--warn);margin-bottom:16px}

/* ---------- LinkedIn planner ---------- */
.liweek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.liweek{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.liweek{grid-template-columns:1fr}}
.lday{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r);display:flex;flex-direction:column;min-height:150px}
.lday-today{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-wash)}
.lday-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
        padding:10px 12px;border-bottom:1px solid var(--rule)}
.lday-n{font-size:12px;font-weight:700;color:var(--ink)}
.lday-add{border:0;background:var(--white);border:1px solid var(--rule-2);color:var(--dim);
          width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:14px;line-height:1}
.lday-add:hover{border-color:var(--pink);color:var(--pink)}
.lday-b{padding:10px;display:flex;flex-direction:column;gap:9px;flex:1}
.lday-e{font-size:11.5px;color:var(--faint);font-style:italic;margin:auto 0;text-align:center}
.lpost{background:var(--white);border:1px solid var(--rule);border-radius:9px;padding:10px 11px}
.lpost-published{opacity:.85}
.lp-failed{border-color:rgba(176,58,58,.4)}
.lp-late{border-color:rgba(169,113,26,.45)}
.lpost-t{display:block;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.lpost-t:hover{color:var(--pink)}
.lpost-m{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11px}
.lpost-x{font-size:11.5px;color:var(--dim);line-height:1.45;margin:7px 0 0}
.lpost-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:11px}
.tagged{background:var(--cream);border:1px solid var(--rule);border-radius:8px;padding:11px 13px;
        display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.tagged code{font-size:11.5px;word-break:break-all;font-family:var(--mono);color:var(--ink)}

/* The hidden attribute loses to any rule that sets display, which has now bitten
   twice (.cm-done on the website, .due here). Make it win everywhere. */
[hidden]{display:none !important}

/* ---------- composer: two columns so it is dense, not sparse ---------- */
.form-wide{max-width:none}
.licomp{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:900px){.licomp{grid-template-columns:1fr;gap:15px}}
.licomp-main,.licomp-side{display:flex;flex-direction:column;gap:15px;min-width:0}
.licomp-side{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r);padding:16px}

/* ---------- compose lightbox ---------- */
.lbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
      padding:22px;background:rgba(20,20,20,.55);backdrop-filter:blur(4px);
      opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.lbox.on{opacity:1;visibility:visible}
.lbox-card{position:relative;display:flex;flex-direction:column;width:min(1000px,100%);
           max-height:92vh;background:var(--white);border-radius:14px;overflow:hidden;
           box-shadow:0 40px 90px -30px rgba(0,0,0,.55);transform:translateY(10px);transition:transform .22s}
.lbox.on .lbox-card{transform:none}
.lbox-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
        padding:16px 22px;border-bottom:1px solid var(--rule);flex:none}
.lbox-h h2{font-size:15px;font-weight:700;margin:0}
.lbox-x{border:0;background:none;font-size:24px;line-height:1;color:var(--dim);cursor:pointer;padding:0 4px}
.lbox-x:hover{color:var(--ink)}
.lbox-b{padding:20px 22px;overflow-y:auto;flex:1 1 auto;gap:0}
.lbox-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
        padding-top:16px;border-top:1px solid var(--rule)}
@media(max-width:640px){.lbox{padding:0}.lbox-card{max-height:100vh;border-radius:0;width:100%}}

/* inputs default to a min width that ignores their container; let them shrink */
.licomp input,.licomp select,.licomp textarea{min-width:0;max-width:100%}

/* Calendar zoom: the day/week/month segmented switcher. */
.liview{display:inline-flex;border:1px solid var(--rule-2);border-radius:9px;overflow:hidden;
        vertical-align:middle;margin-right:6px;background:var(--white)}
.liview a{padding:7px 13px;font-size:12.5px;text-decoration:none;color:var(--dim)}
.liview a + a{border-left:1px solid var(--rule)}
.liview a:hover{color:var(--ink)}
.liview a.on{background:var(--dark);color:#fff}

/* Month grid: whole weeks, compact post chips, out-of-month days receded. */
.limonth{overflow-x:auto}
.limo-hd{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;margin-bottom:6px;min-width:900px}
.limo-hd span{font-size:10.5px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:0 6px}
.limo-g{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;min-width:900px}
.limo-d{background:var(--cream);border:1px solid var(--rule);border-radius:10px;min-height:104px;
        padding:7px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.limo-out{opacity:.45}
.limo-today{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-wash)}
.limo-t{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
.limo-n{font-size:12px;font-weight:700;color:var(--ink);text-decoration:none}
.limo-n:hover{color:var(--pink)}
.limo-t .lday-add{width:20px;height:20px;line-height:1;font-size:13px}
.limo-p{display:block;font-size:11.5px;line-height:1.4;text-decoration:none;color:var(--ink);
        background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--faint);
        border-radius:6px;padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.limo-p:hover{border-left-color:var(--pink)}
.limo-p.lp-scheduled{border-left-color:var(--warn)}
.limo-p.lp-published{border-left-color:var(--ok)}
.limo-p.lp-failed,.limo-p.lp-late{border-left-color:var(--bad)}

/* Days that have gone: receded, no add button, but their posts still read. */
.limo-past{background:var(--cream-2);border-style:dashed}
.limo-past .limo-n{color:var(--faint)}
.limo-past .limo-p{opacity:.8}
.lday-past{background:var(--cream-2);border-style:dashed}
.lday-past .lday-n,.lday-past .lday-nl{color:var(--faint)}

/* A published post's form: visible, locked. */
.lockset{border:0;padding:0;margin:0;min-width:0}
.lockset[disabled]{opacity:.65}

/* Day view: the same card, one column, capped so it doesn't sprawl. */
.liweek-one{grid-template-columns:minmax(0,560px)}
.lday-nl{color:inherit;text-decoration:none}
.lday-nl:hover{color:var(--pink)}

/* The draft-posts list: aligned columns instead of space-between, so the tags
   line up down the page however long each title runs. */
.li-unsched .mrow{justify-content:flex-start}
.li-unsched .mrow-t{flex:0 1 340px}
.li-unsched .tag{flex:none}
.li-unsched .mrow-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.t-slot{background:var(--ok-w);color:var(--ok)}
.t-none{background:rgba(28,28,28,.07);color:var(--dim)}
.t-news{background:var(--warn-w);color:var(--warn)}
@media(max-width:760px){.li-unsched .mrow-v{display:none}.li-unsched .mrow-t{flex:1}}

/* Analytics: real tabs. One panel shown at a time; JS flips .show and .on.
   Everything is server-rendered, so a panel is display-toggled, never fetched.
   .an-h stays for lib/booking.php, which still uses it as a plain heading. */
.antabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.antabs a{padding:7px 15px;border:1px solid var(--rule-2);border-radius:20px;background:var(--white);
          text-decoration:none;font-size:13px;color:var(--dim)}
.antabs a:hover{border-color:var(--pink);color:var(--ink)}
.antabs a.on{background:var(--dark);border-color:var(--dark);color:#fff}
.anpanel{display:none}
.anpanel.show{display:block;margin-top:18px}
.an-h{font-size:17px;margin:28px 0 12px;scroll-margin-top:16px}

/* ---------- Review deck: each draft shown as LinkedIn would show it ---------- */
.deck{max-width:555px;margin:0 auto}
.rcard{display:none}
.rcard.on{display:block}
.rcard-m{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px;font-size:11.5px}
.rcard-edit{margin-left:auto;font-size:12px;color:var(--dim)}
.rcard-edit:hover{color:var(--pink)}

/* The mock: LinkedIn's white card, faithfully enough that what you approve
   is what your feed will get. */
.limock{background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:8px;overflow:hidden;
        font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:rgba(0,0,0,.9)}
.lm-h{display:flex;align-items:flex-start;gap:10px;padding:12px 16px 0}
.lm-av{width:48px;height:48px;flex:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
       gap:3px;padding:9px;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:6px}
.lm-av i{background:#202020;border-radius:1px}
.lm-av i.p{background:var(--pink)}
.lm-who{flex:1;min-width:0;line-height:1.3}
.lm-who b{font-size:14px;display:block}
.lm-who small{display:block;font-size:12px;color:rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-follow{color:#0a66c2;font-weight:600;font-size:14px;flex:none}
.lm-text{padding:10px 16px 4px;font-size:14px;line-height:1.45;max-height:6.2em;overflow:hidden}
.lm-text.open{max-height:none}
.lm-more{border:0;background:none;color:rgba(0,0,0,.6);cursor:pointer;padding:0 16px 8px;font-size:14px}
.lm-more:hover{color:#0a66c2;text-decoration:underline}
.lm-img{display:block;width:100%;height:auto;margin-top:6px}
.lm-noimg{margin:10px 16px 6px;border:1px dashed rgba(0,0,0,.25);border-radius:8px;padding:14px;
          display:flex;align-items:center;justify-content:space-between;gap:12px;
          font-size:12px;color:rgba(0,0,0,.55);flex-wrap:wrap}
.lm-bar{display:flex;justify-content:space-around;border-top:1px solid rgba(0,0,0,.08);
        margin-top:2px;padding:6px 8px;font-size:13px;font-weight:600;color:rgba(0,0,0,.6)}
.lm-bar span{padding:6px 8px}
.lm-cmt{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid rgba(0,0,0,.08)}
.lm-av-s{width:32px;height:32px;padding:6px;gap:2px;border-radius:5px}
.lm-cmt-b{background:#f2f2f2;border-radius:0 8px 8px 8px;padding:8px 12px;font-size:13px;line-height:1.45;
          min-width:0;word-break:break-word}
.lm-cmt-b b{font-size:13px}

.rcard-img-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0 0;font-size:12px}
.rcard-img-a form{flex:none}
.rimg-pick{cursor:pointer;display:inline-block}
.rcard-a{display:flex;gap:10px;justify-content:space-between;padding:14px 0}
.rcard-a form{flex:1}
.rcard-a .btn{width:100%}
.rbtn-skip{color:var(--bad)}
.rbtn-tweak{flex:1}
.rcard-tweak{display:flex;gap:8px;padding:0 0 16px}
.rcard-tweak input{flex:1;border:1px solid var(--rule-2);border-radius:8px;padding:8px 11px;min-width:0}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.pimg{display:block;width:100%;border-radius:9px;border:1px solid var(--rule)}

/* ---------- Bosun chat ---------- */
.bo-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.bo-feed{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px;
         max-height:min(62vh,640px);min-height:280px;scroll-behavior:smooth}
.bo-turn{display:flex;flex-direction:column;gap:10px}
.bo-msg{max-width:76%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.55}
.bo-msg p{margin:0 0 8px}.bo-msg p:last-child{margin-bottom:0}
.bo-msg ul{margin:4px 0 8px;padding-left:20px}.bo-msg ul:last-child{margin-bottom:0}
.bo-msg code{font-family:var(--mono);font-size:12.5px;background:rgba(28,28,28,.06);
             padding:1px 5px;border-radius:5px}
.bo-me{align-self:flex-end;background:var(--dark);color:#F2EFEA;border-bottom-right-radius:4px}
.bo-bot{align-self:flex-start;background:var(--cream);border:1px solid var(--rule);
        border-bottom-left-radius:4px}
.bo-err{background:var(--bad-w);border-color:rgba(179,69,63,.25);color:var(--bad)}
.bo-wait{color:var(--dim)}
.bo-wait small{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}
.bo-sess{display:block;margin-top:8px;font-size:11.5px;color:var(--faint);text-decoration:none}
.bo-sess:hover{color:var(--dim);text-decoration:underline}
.bo-dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pink);
           margin-right:3px;animation:bo-b 1.2s infinite}
.bo-dots i:nth-child(2){animation-delay:.2s}.bo-dots i:nth-child(3){animation-delay:.4s}
@keyframes bo-b{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.bo-rate{display:flex;gap:6px;align-items:center;margin-top:9px;padding-top:8px;border-top:1px dashed var(--rule)}
.bo-rb{border:1px solid var(--rule-2);background:var(--white);border-radius:7px;padding:2px 9px;
       font-size:13px;cursor:pointer;line-height:1.6}
.bo-rb:hover{border-color:var(--pink)}
.bo-rated{font-size:12px;color:var(--faint)}
.bo-fb{display:flex;gap:7px;flex:1}
.bo-fb input{flex:1;border:1px solid var(--rule-2);border-radius:7px;padding:5px 9px;font-size:12.5px;min-width:0}
.bo-send{border-top:1px solid var(--rule);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.bo-send textarea{width:100%;border:1px solid var(--rule-2);border-radius:var(--r);
                  padding:10px 12px;resize:vertical;min-height:44px;background:var(--white)}
.bo-send textarea:focus{outline:2px solid var(--pink);outline-offset:0;border-color:transparent}
.bo-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bo-fresh{font-size:12.5px;color:var(--dim);display:flex;align-items:center;gap:7px;cursor:pointer}
.bo-note{margin-top:10px;font-size:12.5px}
@media(max-width:640px){.bo-msg{max-width:92%}}

/* ---------- what a delete will actually do ---------- */
.imp{list-style:none;margin:0 0 14px;padding:12px 14px;background:var(--warn-w);
     border:1px solid rgba(169,113,26,.28);border-radius:var(--r);
     display:flex;flex-direction:column;gap:7px}
.imp li{font-size:12.5px;line-height:1.5;color:var(--warn);padding-left:16px;position:relative}
.imp li:before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;
               border-radius:50%;background:currentColor;opacity:.6}
.imp-block{background:var(--bad-w);border-color:rgba(176,58,58,.3)}
.imp-block li{color:var(--bad)}

/* ---------- chart bar tooltips ----------
   analytics.php marks each bar with data-tl (label) and data-tv (value). The
   rules that rendered these were lost before they were committed, so this is a
   rebuild against that markup: without it the bars carry the data and show
   nothing at all, having already given up the native title tooltip.
   .bar drops overflow:hidden so the tooltip is not clipped; the fill keeps its
   own radius, so the bars look the same. */
.bar{position:relative;overflow:visible}
.bar[data-tl]:hover::after{
  content:attr(data-tl) ": " attr(data-tv);
  position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);
  background:var(--dark);color:#F2EFEA;font-size:11.5px;line-height:1.35;
  padding:5px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.bar[data-tl]:hover::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%,2px);
  border:4px solid transparent;border-top-color:var(--dark);pointer-events:none;z-index:5}

/* ==========================================================================
   Everything below is generated from the per-page CSS written alongside the
   September 2026 speed-and-flow work. Order matters: rules here override the
   base above them.
   ========================================================================== */


/* Global search in the sidebar. Every list searched only itself, so finding
   something meant guessing which page it lived on; this is the way in. */
.side-search{position:relative;display:flex;align-items:center;margin:0 12px 12px}
.side-search .ss-ic{position:absolute;left:10px;width:14px;height:14px;color:#8C867E;pointer-events:none}
.side-search .ss-ic svg{width:100%;height:100%;display:block}
.side-search input{width:100%;padding:8px 30px 8px 30px;border-radius:8px;font-family:inherit;
                   font-size:13px;color:#fff;background:rgba(255,255,255,.06);
                   border:1px solid rgba(255,255,255,.09);transition:background .15s,border-color .15s}
.side-search input::placeholder{color:#8C867E}
.side-search input:focus{outline:none;background:rgba(255,255,255,.10);border-color:var(--pink)}
.side-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.side-search kbd{position:absolute;right:9px;font-family:inherit;font-size:10.5px;color:#8C867E;
                 border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:0 4px;line-height:15px}
.side-search input:focus ~ kbd{opacity:0}

/* A prompt that is asking, not blocking. The lost-reason card (.card-ask) shouts
   in pink because that answer is only ever available now; this one just nudges. */
.card-nudge{border-left:3px solid var(--pink-lt);margin-bottom:16px}
.card-nudge .inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Collapsed sidebar: the search box has to give way, or it pushes Sign out off
   the right edge and the whole page gains a horizontal scrollbar. */
@media(max-width:860px){
  .side{flex-wrap:wrap}
  .side-search{flex:1 1 130px;max-width:230px;margin:0 10px 0 0}
  .side-search input{padding-right:10px}
  .side-search kbd{display:none}
}

/* On a phone the collapsed bar was already wider than the screen before the
   Today entry was added to it. Give the search and the icon row a full line
   each, under the brand, instead of dragging the page sideways. */
@media(max-width:640px){
  .side{flex-wrap:wrap;padding-bottom:10px}
  .side-brand{order:0}
  .side-foot{order:1;margin-left:auto}
  .side-search{order:2;flex:1 1 100%;max-width:none;margin:0 0 9px}
  .side-search input{padding-right:10px}
  .side-nav{order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start;gap:2px}
}

/* ============================================================================
   Global search (search.php).

   Append this block to assets/admin.css and bump the ?v= in lib/layout.php.
   Four new rules only: the page is four ordinary .list groups stacked up, so
   everything else it needs already exists. Without this block the page still
   works, the group headings are just browser-default size.
   ========================================================================== */

/* ---------- global search ---------- */
.sr-sum{font-size:13px;color:var(--dim);margin-bottom:18px}
.sr-sum strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sr-sum .muted{margin-left:8px}
.sr-g + .sr-g{margin-top:26px}
/* Matches the .card h2 label so a group reads as a section, not a page title. */
.sr-k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
      font-weight:600;margin:0 2px 8px}
.sr-more{margin-top:8px;padding-left:2px}
.sr-more a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.sr-more a:hover{color:var(--ink)}


/* ---------- pipeline board: filters, sort, owner, quick create ---------- */
/* The owner select sits in the same row as the search box, so it borrows the
   .search input treatment rather than inventing a second field style. */
.pipe-f{flex-wrap:wrap}
.pipe-f select{padding:8px 12px;border:1px solid var(--rule-2);border-radius:8px;
               font-family:inherit;font-size:13px;background:var(--white);color:var(--ink)}
.pipe-f select:focus{outline:2px solid var(--pink);outline-offset:-1px}
.pipe-mine{white-space:nowrap}
.pipe-mine.on{background:var(--dark);border-color:var(--dark);color:var(--white)}
.pipe-mine.on:hover{border-color:var(--dark)}

/* The filter survives navigating away and back, so the board has to say out
   loud what it is holding back. Missing deals must never be a mystery. */
.pipe-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;
           padding:10px 14px;border:1px solid var(--pink);background:var(--pink-wash);
           border-radius:var(--r);font-size:13px;color:var(--ink)}
.pipe-note strong{font-weight:700}
.pipe-note .btn-plain{margin-left:auto}

/* Owner initials at the right end of the card footer, so a card scanned at
   speed reads title, then value, then whose it is. Subtle on purpose: it is a
   reminder, not the headline. */
.deal-own{flex:none;margin-left:auto;width:20px;height:20px;border-radius:50%;
          display:inline-flex;align-items:center;justify-content:center;
          background:var(--cream);border:1px solid var(--rule-2);
          font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--dim);
          cursor:default}

/* .lbox-b zeroes the gap for the composer's own grid; the quick-create form is
   a plain stacked one, so it keeps normal form spacing. */
.dbox-b{gap:15px}
.dbox-b input,.dbox-b select{min-width:0;max-width:100%}

/* ---------------------------------------------------------------------------
   Creating records: companies.php and contacts.php.

   New rules only. Everything these two pages already had a class for reuses it
   (.card, .form, .two, .btn, .btn-pri, .btn-plain, .minirows, .mrow, .empty),
   so this file is the short list of things that genuinely had no class.

   To ship: fold these rules into assets/admin.css and bump its ?v= in
   lib/layout.php, which is where the stylesheet is requested.
   --------------------------------------------------------------------------- */

/* A flash that points at the record it is talking about. Refusing a duplicate
   is only useful if you can get to the person or account that already exists,
   and .flash had no link style, so the link came out browser-blue. */
.flash a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.flash a:hover{color:var(--pink)}

/* Submit next to Cancel. .form .btn is align-self:flex-start, which pulls the
   button out of a row of its own, so the row puts its children back on a line. */
.form-actions{display:flex;align-items:center;gap:14px}
.form-actions .btn{align-self:auto}

/* A minirow that carries its own action. The row link and the action link have
   to be siblings rather than nested, because an anchor inside an anchor is not
   valid HTML, so the outer element stops being the link and the title becomes
   it instead. */
.mrow-act .mrow-t{color:inherit;text-decoration:none}
.mrow-act:hover .mrow-t{color:var(--pink)}
.mrow-go{color:var(--dim);font-size:12px;white-space:nowrap;text-decoration:none}
.mrow-go:hover{color:var(--pink)}

/* ============================================================================
   Today: the work queue.

   Append this block to assets/admin.css. Everything structural on that page is
   already in admin.css (.kpis, .list, .seg, .due, .empty, .btn, .avatar, .dn-t,
   .dn-none), so these rules only cover the one thing today.php has and no other
   page does: a list row that is also an editable form.
   ========================================================================== */

/* ---------- today: the work queue ---------- */
.q-sec{margin-bottom:24px}
.q-sec:last-child{margin-bottom:0}
.q-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
     font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:9px}
.q-c{font-size:11px;letter-spacing:0;color:var(--dim);background:var(--cream-2);
     border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}
.q-b{font-size:12.5px;color:var(--faint);margin:-4px 0 9px}

/* The row wraps rather than using a grid: the form on the end is the widest
   thing on the page, and on a narrow window it has to drop under the deal
   instead of squeezing the title down to three characters. */
.qrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
      padding:11px 16px;border-bottom:1px solid var(--rule)}
.qrow:last-child{border-bottom:0}
.qrow:hover{background:var(--cream)}

.q-av{width:24px;height:24px;font-size:10.5px;flex:none}
.q-av-none{background:var(--cream-2);color:var(--faint)}

.qrow-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 190px}
.qrow-t{font-weight:600;font-size:14px;text-decoration:none;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow-t:hover{color:var(--pink)}
.qrow-m{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow-m a{color:var(--dim);text-decoration:none}
.qrow-m a:hover{color:var(--ink);text-decoration:underline}
.q-dot{margin:0 5px;color:var(--faint)}

.qrow-next{display:flex;align-items:baseline;gap:7px;min-width:0;flex:1 1 200px;font-size:13px}

.qrow-act{display:flex;align-items:center;gap:7px;margin-left:auto}
.qrow-set{display:flex;align-items:center;gap:6px;margin:0}
/* admin.css scopes its input styling to .form, and this is not a form card. */
.qrow-set input{padding:6px 9px;border:1px solid var(--rule-2);border-radius:7px;
                background:var(--cream);color:var(--ink);font-size:12.5px;min-width:0}
.qrow-set input:focus{outline:2px solid var(--pink);outline-offset:-1px;background:var(--white)}
.qrow-set input[type=text]{flex:1 1 170px;max-width:230px}
.qrow-set input[type=date]{flex:none;width:140px}

@media(max-width:1100px){
  .qrow{align-items:flex-start}
  .qrow-act{margin-left:0;width:100%;flex-wrap:wrap}
  .qrow-set{flex:1 1 260px;flex-wrap:wrap}
  .qrow-set input[type=text]{max-width:none}
}

/* ============================================================================
   Inbox additions. Written as a separate file only because assets/admin.css is
   being edited elsewhere; these rules belong at the end of it, after the page
   header block. Everything here is polish: the triage navigation in the enquiry
   header is built from existing .btn and .muted classes and reads correctly
   without any of this loaded.
   ========================================================================== */

/* "3 of 27" between the Previous and Next buttons during a triage run. Tabular
   numerals so the position does not shuffle sideways as you step through, and
   it is the first thing to go when the header runs out of room: the two buttons
   either side are what you actually click. */
.triage-pos{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  padding:0 2px;
}
@media(max-width:860px){ .triage-pos{display:none} }

/* ============================================================================
   Settings, the team rows under "Who can sign in".

   The row now carries three controls (full name, reset email, role) beside a
   Remove button, which is one more than it was built for. These rules fix the
   two text boxes to a sensible width on a wide screen and, on a narrow one,
   drop the whole control group onto its own line under the person's name, so
   the row wraps in one predictable place instead of splitting mid-group.

   Everything else is reused from assets/admin.css: .userrow, .rolesel,
   .inline, .btn and the brand tokens are left exactly as they are. The size
   attributes on the inputs mean the row is still sane if this file is missing.
   ========================================================================== */

.u-name{width:172px}
.u-email{width:200px}

/* The person's name is the label for the row, so it keeps its space. */
.userrow>span:first-child{min-width:110px}

@media(max-width:900px){
  .userrow{align-items:flex-start}
  .userrow>span:last-child{width:100%}
  .userrow form.inline{flex:1 1 210px}
  .u-name,.u-email{flex:1 1 auto;width:auto;min-width:0}
}