/* crm — prototype for proposal P3.
   --acc MEANS ONE THING HERE: "someone is waiting on you — a next step whose date
   has arrived." It marks the overdue count tile, the one most-overdue row's
   button, and nothing else. Stage is words, value is a number, neither is colour.
   See craft/patterns/worklist.md §1: an accent on every row marks no row. */

.proto{font-size:.7rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);
  border-radius:20px;padding:2px 9px}
.notice{margin:22px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:9px;
  color:var(--dim);font-size:.88rem;max-width:70ch}
.notice b{color:var(--ink);font-weight:600}

/* --- buttons & fields (from sign/app.css) ------------------------------- */
.btn{font:500 .92rem/1 var(--sans);display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:11px 17px;min-height:44px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--edge);transition:border-color .16s ease,transform .16s ease,background .16s ease}
.btn:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line));text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#17120a;font-weight:600}
.btn.primary:hover{background:color-mix(in srgb,var(--acc) 88%,#fff)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--dim);padding-inline:8px}
.btn.quiet:hover{color:var(--ink);background:var(--panel)}
.btn.sm{min-height:44px;padding:9px 13px;font-size:.86rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.f{display:block;margin:0 0 14px}
.f>span{display:block;font-size:.72rem;letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);padding:11px 13px;font:inherit;font-size:.96rem;min-height:46px;
  box-shadow:inset 0 1px 0 var(--edge)}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.chip{font:inherit;font-size:.82rem;padding:8px 12px;min-height:44px;border-radius:20px;cursor:pointer;
  background:transparent;color:var(--dim);border:1px solid var(--line)}
.chip:hover,.chip[aria-pressed=true]{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}

/* --- today's worklist --------------------------------------------------- */
.work{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.work>li{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:inset 0 1px 0 var(--edge);padding:14px 16px;animation:rise .38s cubic-bezier(.2,.6,.2,1) both}
.work>li:nth-child(2){animation-delay:40ms}.work>li:nth-child(3){animation-delay:80ms}
.work>li:nth-child(4){animation-delay:120ms}.work>li:nth-child(n+5){animation-delay:160ms}
.w-top{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.w-who{min-width:0}
.w-who button{all:unset;cursor:pointer;font-weight:600;color:var(--ink)}
.w-who button:hover{color:var(--link)}
.w-who button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
.w-biz{color:var(--dim);font-size:.88rem}
.w-step{margin:.5em 0 .2em}
.w-meta{color:var(--dim);font-size:.82rem;font-variant-numeric:tabular-nums}
.w-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.grp-h{font:600 .95rem/1.3 var(--serif);margin:26px 0 8px;color:var(--ink)}
.grp-h .n{font-family:var(--sans);font-size:.78rem;color:var(--dim);font-weight:400;margin-inline-start:6px}
.done-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* --- stage tiles double as the filter ----------------------------------- */
.tiles button.tile{font:inherit;color:inherit;text-align:start;cursor:pointer;min-height:44px}
.tiles button.tile[aria-pressed=true]{border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.tiles button.tile:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
.tile .k{text-transform:none;letter-spacing:.02em;font-size:.76rem}
.tile small{display:block;color:var(--dim);font-size:.76rem;font-variant-numeric:tabular-nums}
table.reg td:first-child button{all:unset;cursor:pointer;color:var(--ink);font-weight:500}
table.reg td:first-child button:hover{color:var(--link)}
table.reg td:first-child button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
table.reg td .sub{display:block;color:var(--dim);font-size:.8rem}
td.num{white-space:nowrap}

/* --- dialog ------------------------------------------------------------- */
dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:13px;
  box-shadow:inset 0 1px 0 var(--edge),0 20px 60px rgba(0,0,0,.5);padding:20px 20px 8px}
dialog::backdrop{background:rgba(5,6,10,.72)}
.dlg-x{position:absolute;inset-inline-end:8px;top:8px;margin:0}
dialog h2{margin:0 0 4px;padding-inline-end:44px}
.tl{list-style:none;margin:8px 0 14px;padding:0;border-inline-start:1px solid var(--line)}
.tl li{position:relative;padding-block:0 12px;padding-inline-start:16px;font-size:.9rem}
.tl li::before{content:"";position:absolute;inset-inline-start:-4px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--line)}
.tl time{display:block;color:var(--dim);font-size:.78rem;font-variant-numeric:tabular-nums}
.tl .sys{color:var(--dim)}

/* Six tiles (late + five stages): auto-fit at base.css's 158px wrapped 5+1 at 940px. */
#tiles{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}

@media(max-width:560px){
  /* Five columns at 390px squeezed "next step" into one word per line (screenshot
     2.10.26). On a phone each row becomes a two-line card: who · stage / step / value · touch. */
  table.reg,table.reg tbody{display:block}
  table.reg thead{display:none}
  table.reg tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;
    border-bottom:1px solid var(--line)}
  table.reg td{border:0;padding:0}
  table.reg td:nth-child(2){text-align:end;color:var(--dim);font-size:.86rem}
  table.reg td:nth-child(3){grid-column:1/-1}
  table.reg td:nth-child(5){text-align:end;color:var(--dim);font-size:.86rem}
  table.reg td:nth-child(5)::before{content:attr(data-k)}
  #tiles{grid-template-columns:1fr 1fr}

  .grid2{grid-template-columns:1fr}
  .w-top{flex-direction:column;gap:2px}
  .topnav .proto{display:none}
}
@media(prefers-reduced-motion:reduce){
  .work>li{animation:none}
  .btn,.tiles button.tile{transition:none}
}

/* Names are the link into a record. 26px tall measured by `finish` at 390px — the
   padding grows the hit area to 44px, the negative margin keeps the line where it was. */
.w-who button,table.reg td:first-child button{padding-block:9px;margin-block:-9px;display:inline-block}