/* The lanes. One block each, prefixed by what it draws. */

/* ------------------------------------------------------------ Today */
.today{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
.today-side .g-h:first-child{margin-top:2px}
.ocards{display:flex; flex-direction:column; gap:10px}
.ocard{padding:14px 16px; cursor:pointer; transition:background var(--d-state) var(--spring), transform var(--d-lift) var(--spring), box-shadow var(--d-lift) var(--spring)}
.ocard:hover{background:var(--card-hover); transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--glass-hi), var(--shadow-sm)}
.ocards > .gone{margin-top:-10px}
.oc-h{display:flex; align-items:center; gap:12px; min-width:0}
.oc-who{flex:1; min-width:0}
.oc-who .row b{font-size:14px}
.oc-prev{margin:10px 0 0; color:var(--t2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.oc-draft{margin-top:12px; padding:12px 12px 10px; border-radius:var(--r-row); background:var(--fill3); border:1px solid var(--card-line); box-shadow:inset 0 1px 0 var(--glass-hi)}
.oc-body{white-space:pre-wrap; font-size:13px; line-height:19px; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:10px}
.ev-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; color:var(--t1); text-decoration:none !important}
.ev-row:hover{background:var(--fill3)}
.ev-t{font-size:11px; color:var(--t2); min-width:44px}
.todo-row{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding-top:8px !important; padding-bottom:8px !important}
.g-card.empty.sm{padding:14px 16px; color:var(--t3); font-size:13px}
.tickbox{width:18px; height:18px; border-radius:6px; border:1.5px solid var(--t3); flex:0 0 auto; position:relative;
  transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring)}
.tickbox:hover{border-color:var(--tint)}
.tickbox.on, .tickbox[aria-checked="true"]{background:var(--tint-fill); border-color:var(--tint-fill)}
.tickbox.on::after, .tickbox[aria-checked="true"]::after{content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.brief{font-size:13px; line-height:20px}
.brief h4{font:600 11px/16px var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--t3); margin:12px 0 4px}
.brief h4:first-child{margin-top:0}
.brief ul{margin:0; padding-left:18px}
.brief li{margin:3px 0}
.brief p{margin:6px 0}

/* ------------------------------------------------------------ Messages */
.msgs-lane .mlistsheet{flex:1 1 440px; min-width:340px}
.msgs-lane .thread{flex:1.25 1 520px; width:auto; min-width:420px}
.msgs-lane:not(.has-thread) .mlistsheet{flex-grow:1}
.chiprow{display:none}
.mlist{display:grid; grid-template-columns:minmax(0,1fr) auto auto}
.mhead, .mrow{display:contents}
.mhead > div{position:sticky; top:0; z-index:2; padding:8px 12px; font:600 11px/16px var(--sans); letter-spacing:.02em; text-transform:uppercase; color:var(--t3);
  background:color-mix(in srgb, var(--sheet) 45%, transparent); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar); border-bottom:1px solid var(--sep); white-space:nowrap}
.mhead > div:first-child{padding-left:20px}
.mrow > div{padding:10px 12px; border-bottom:1px solid var(--sep); display:flex; align-items:center; min-width:0; cursor:pointer;
  transition:background var(--d-state) var(--spring)}
.mrow > div:first-child{padding-left:20px}
.mrow:hover > div{background:var(--fill3)}
.mrow[aria-selected="true"] > div{background:var(--tint-soft)}
.mrow.arrive > div, .mrow.arrived > div{animation:landed var(--d-land) var(--spring) both}
.mlistsheet .scroll.swap{animation:fadein var(--d-seg) var(--spring) both}
.mrow:focus-visible{outline:none}
.mrow:focus-visible > div{background:var(--fill3)}
.mc-who{gap:12px}
.mc-txt{min-width:0; flex:1}
.mc-txt .row{gap:6px}
.mc-txt b{font-weight:600}
.mc-txt .t2{margin-top:2px}
.mc-at{font-size:11px; color:var(--t2); justify-content:flex-end}
.thread .ihead .who{color:var(--t1); text-decoration:none; min-width:0; gap:10px}
.thread .ihead .tt{display:flex; flex-direction:column; min-width:0}
.thread .ihead .tt .t2{display:flex; gap:6px; align-items:center; font-size:12px}
.tacts{padding:8px 16px; border-bottom:1px solid var(--sep)}
.tacts .g-btn{gap:6px}
.msgs{flex:1; min-height:0; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.bub{max-width:82%; display:flex; flex-direction:column; gap:3px}
.bub .btxt{padding:9px 12px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:19px}
.bub.in{align-self:flex-start}
.bub.in .btxt{background:var(--bubble-in); border-bottom-left-radius:5px}
.bub.out{align-self:flex-end; align-items:flex-end}
.bub.out .btxt{background:var(--tint-fill); color:#fff; border-bottom-right-radius:5px}
.bub .bmeta{font-size:10.5px; color:var(--t3); padding:0 6px}
.editor{border-top:1px solid var(--sep); padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; background:var(--glass2)}
.editor.none{padding:12px 16px; background:transparent}
.editor.own .g-ta{min-height:88px}
.editor .g-ta{min-height:120px; max-height:40vh; background:var(--card)}
.editor .g-sel{height:30px; max-width:180px}
.collide{display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:10px; background:var(--orange-soft); color:var(--orange-ink); font-size:12px; line-height:17px}
.collide svg{width:15px; height:15px; flex:0 0 auto; margin-top:1px}
.collide b{font-weight:650}
.why{display:inline-grid; place-items:center; width:26px; height:26px; color:var(--t3); border-radius:8px; cursor:help}
.why:hover{color:var(--t1); background:var(--fill3)}
.why svg{width:15px; height:15px}

/* ------------------------------------------------------------ tables */
.tbl{width:100%; border-collapse:separate; border-spacing:0}
.tbl th{position:sticky; top:0; z-index:2; text-align:left; padding:8px 12px; font:600 11px/16px var(--sans); letter-spacing:.02em; text-transform:uppercase; color:var(--t3);
  background:color-mix(in srgb, var(--sheet) 45%, transparent); -webkit-backdrop-filter:var(--blur-bar); backdrop-filter:var(--blur-bar); border-bottom:1px solid var(--sep); white-space:nowrap}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--sep); vertical-align:middle}
.tbl th:first-child, .tbl td:first-child{padding-left:20px}
.tbl th:last-child, .tbl td:last-child{padding-right:20px}
.tbl tbody tr{transition:background var(--d-state) var(--spring)}
.tbl tbody tr.hov{cursor:pointer}
.tbl tbody tr.hov:hover{background:var(--fill3)}
.tbl tbody tr[aria-selected="true"]{background:var(--tint-soft)}
.tbl tbody tr.arrive, .tbl tbody tr.arrived{animation:landed var(--d-land) var(--spring) both}
.tbl .chs .ch{gap:0}
.tbl td.num, .tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl .sub{display:block; font-size:12px; color:var(--t2)}
.tbl .who .nm{font-weight:550}
.tbl .chs{display:inline-flex; gap:8px; flex-wrap:wrap}
.tbl.inpanel th{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; position:static}
.tbl.inpanel td:first-child, .tbl.inpanel th:first-child{padding-left:14px}
.tbl.inpanel tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------ People */
.pp-head{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.pp-head h3{font:700 19px/24px var(--sans); letter-spacing:-.02em}
.handles{display:flex; flex-direction:column; gap:6px}
.handle{display:flex; gap:10px; align-items:baseline; font-size:13px; min-width:0}
.handle .k{width:70px; flex:0 0 auto; color:var(--t3); font-size:12px}
.handle .v{font-family:var(--mono); font-size:12px; overflow-wrap:anywhere}
.touches{display:flex; flex-direction:column; gap:8px}
.touch{display:flex; gap:10px; align-items:center; font-size:13px}
.touch .dir{color:var(--t3); font-size:12px}
.mini{display:flex; flex-direction:column; gap:6px}
.mini a, .mini .it{display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; background:var(--card); border:1px solid var(--card-line); color:var(--t1); text-decoration:none; min-width:0;
  transition:background var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.mini a:hover{background:var(--card-hover); transform:translateY(-1px); text-decoration:none}
.note{padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--card-line); white-space:pre-wrap; font-size:13px}
.note .meta{display:flex; gap:6px; align-items:center; font-size:11px; color:var(--t3); margin-top:6px; white-space:normal}
.addnote{display:flex; flex-direction:column; gap:8px; margin-top:8px}

/* ------------------------------------------------------------ Pipeline */
.board{display:flex; gap:12px; padding:14px 16px 20px; min-height:100%; align-items:flex-start}
.bcol{flex:0 0 256px; min-width:0; display:flex; flex-direction:column; gap:8px; min-height:120px; border-radius:var(--r-card); padding:8px; background:var(--fill3); border:1px solid var(--card-line);
  transition:background var(--d-state) var(--spring), box-shadow var(--d-state) var(--spring)}
.bcol.over{background:var(--tint-soft); box-shadow:inset 0 0 0 1.5px var(--tint-line)}
.bcol-h{display:flex; align-items:baseline; gap:8px; padding:4px 6px 2px}
.bcol-h b{font:600 13px/18px var(--sans)}
.bcol-h .n{font:500 11px/16px var(--mono); color:var(--t3)}
.bcol-h .v{margin-left:auto; font:500 11px/16px var(--mono); color:var(--t2)}
.bcol.lit{animation:litcol 1100ms var(--spring)}
@keyframes litcol{0%{box-shadow:inset 0 0 0 1.5px var(--tint-line); background:var(--tint-soft)}100%{box-shadow:inset 0 0 0 1.5px transparent}}
.dcard{padding:10px 12px; border-radius:var(--r-row); background:var(--card-solid); border:1px solid var(--card-line); cursor:grab; display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--shadow-sm); transition:transform var(--d-lift) var(--spring), box-shadow var(--d-lift) var(--spring)}
.dcard:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm), 0 6px 18px rgba(0,0,0,.14)}
.dcard:active{cursor:grabbing}
.dcard.drag{opacity:.4}
.dcard[aria-selected="true"]{box-shadow:var(--shadow-sel)}
.dcard .tt{font-weight:600}
.dcard .row{font-size:12px; color:var(--t2)}
.dcard .val{font:600 12px/16px var(--mono); color:var(--t1); margin-left:auto}
.form{display:flex; flex-direction:column; gap:12px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ------------------------------------------------------------ Todos */
.addrow{display:flex; gap:8px; padding:2px 20px 12px; border-bottom:1px solid var(--sep)}
.addrow .g-in{flex:1}
.tbl tr.done td{color:var(--t3)}
.tbl td .td-ck{margin:-3px 0}

/* ------------------------------------------------------------ Meetings */
.tbl td.mt-cell{max-width:0; width:100%}
.mt-cell b{display:block}
.mt-cell .sub{padding-right:4px}

/* ------------------------------------------------------------ Team, Settings */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px}
.set{max-width:760px}
.set .g-panel + .g-panel{margin-top:12px}
.planrow{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.planrow .nm{font:700 22px/28px var(--sans); letter-spacing:-.02em}
.plans{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:12px}
.plan{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r-card); background:var(--card); border:1px solid var(--card-line); box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:background var(--d-state) var(--spring), transform var(--d-lift) var(--spring)}
.plan:hover{background:var(--card-hover); transform:translateY(-1px)}
.plan.cur{border-color:var(--tint-line); background:var(--tint-soft)}
.plan .pn{font:700 15px/20px var(--sans)}
.plan .pp{font:700 22px/26px var(--sans); letter-spacing:-.02em}
.plan .pp small{font:500 12px/16px var(--sans); color:var(--t2); letter-spacing:0}
.plan ul{margin:0; padding-left:16px; color:var(--t2); font-size:12px; line-height:17px}
.plan .g-btn{margin-top:auto}
.steps-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; counter-reset:s}
.steps-list li{display:flex; flex-direction:column; gap:4px; counter-increment:s}
.steps-list li > .t3::before{content:counter(s) ". "}
.danger{border-color:color-mix(in srgb, var(--red) 35%, transparent)}
.status{display:inline-flex; align-items:center; gap:6px}
.status i{width:8px; height:8px; border-radius:50%; background:var(--c, var(--t3))}

.ph-only{display:none}

/* ------------------------------------------------------------ desk widths */
@media (max-width: 1180px){
  .today{grid-template-columns:minmax(0,1fr)}
  .msgs-lane .lm{display:none}
}
@media (max-width: 980px) and (min-width: 431px){
  .msgs-lane.has-thread .mlistsheet{display:none}
}

/* ------------------------------------------------------------ phone */
@media (max-width: 430px){
  .ph-only{display:flex}
  .chiprow{display:flex; gap:6px; padding:2px 16px 10px; overflow-x:auto; scrollbar-width:none; flex:0 0 auto; border-bottom:1px solid var(--sep)}
  .chiprow::-webkit-scrollbar{display:none}
  .msgs-lane .mlistsheet{min-width:0; flex:1}
  .msgs-lane .thread{min-width:0}
  .mlist{grid-template-columns:minmax(0,1fr) auto}
  .mhead > div:nth-child(2), .mrow > .mc-ch{display:none}
  .mrow > div:first-child, .mhead > div:first-child{padding-left:16px}
  .bub{max-width:88%}
  .editor{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .editor .g-ta{min-height:110px}
  .tbl .ph-hide{display:none}
  .tbl th:first-child, .tbl td:first-child{padding-left:16px}
  .tbl th:last-child, .tbl td:last-child{padding-right:16px}
  .tbl td, .tbl th{padding-left:8px; padding-right:8px}
  .board{flex-direction:column; padding:12px}
  .bcol{flex:none; width:100%}
  .addrow{padding:2px 16px 10px}
  .form .two{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .kv{grid-template-columns:96px minmax(0,1fr)}
}

.chev{display:inline-block; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); margin-left:2px; opacity:.7}
.addrow input[type="date"]{flex:0 0 160px; width:160px}

/* ------------------------------------------------------------ hover, press, focus */
.ocard:active{transform:translateY(0) scale(.995)}
.ocard:hover .oc-prev{color:var(--t1)}
.oc-prev{transition:color var(--d-state) var(--spring)}
.ocard:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--tint-line)}
.oc-draft{transition:background var(--d-state) var(--spring), border-color var(--d-state) var(--spring)}
.ocard:hover .oc-draft{background:var(--fill2)}
.ev-row{transition:background var(--d-state) var(--spring)}
.ev-row:hover .ell{color:var(--tint-ink)}
.ev-row:active{background:var(--fill2)}
.todo-row:hover .td-tt{color:var(--t1)}
.mrow:active > div{background:var(--fill2)}
.mrow[aria-selected="true"]:hover > div{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.mrow:hover .mc-at{color:var(--t1)}
.mrow:hover .g-face, .mrow:hover .g-ini{box-shadow:0 0 0 1px var(--card-line), 0 0 0 3px var(--fill3)}
.mhead > div{transition:color var(--d-state) var(--spring)}
.mhead > div:hover{color:var(--t1); cursor:pointer}
.tbl th{transition:color var(--d-state) var(--spring)}
.tbl th:not([data-tnosort]):hover{color:var(--t1); cursor:pointer}
.tbl tbody tr:not(.hov):hover{background:color-mix(in srgb, var(--fill3) 60%, transparent)}
.tbl tbody tr.hov:active{background:var(--fill2)}
.tbl tbody tr[aria-selected="true"]:hover{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.tbl tbody tr.hov:hover .who .nm{color:var(--tint-ink)}
.tbl tbody tr.hov:hover .sub{color:var(--t1)}
.tbl .who .nm, .tbl .sub{transition:color var(--d-state) var(--spring)}
.tbl a:hover{text-decoration:none; color:var(--t1)}
.thread .ihead .who:hover .g-face, .thread .ihead .who:hover .g-ini{box-shadow:0 0 0 1px var(--card-line), 0 0 0 3px var(--fill2)}
.tacts .g-btn:hover svg{color:var(--t1)}
.bub .btxt{transition:filter var(--d-state) var(--spring)}
.bub:hover .bmeta{color:var(--t2)}
.bub .bmeta{transition:color var(--d-state) var(--spring)}
.editor .g-ta:hover:not(:focus){background:var(--card-hover)}
.handle:hover .v{color:var(--t1)}
.handle:hover .k{color:var(--t2)}
.touch:hover .dir{color:var(--t2)}
.mini a:active{transform:none; background:var(--fill2)}
.mini a:hover .g-pill{filter:brightness(1.1)}
.mini .it{transition:background var(--d-state) var(--spring)}
.mini .it:hover{background:var(--card-hover)}
.note{transition:background var(--d-state) var(--spring)}
.note:hover{background:var(--card-hover)}
.bcol:hover .bcol-h .v{color:var(--t1)}
.bcol-h .v{transition:color var(--d-state) var(--spring)}
.dcard:focus-visible{outline:2px solid var(--tint); outline-offset:2px}
.dcard:hover .tt{color:var(--tint-ink) !important}
.dcard .tt{transition:color var(--d-state) var(--spring)}
.dcard:active:not(.drag){transform:scale(.99)}
.plan:active{transform:scale(.99)}
.plan.cur:hover{background:color-mix(in srgb, var(--tint) 24%, transparent)}
.addrow .g-btn:active{transform:scale(.97)}
.status:hover i{box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--t3)) 22%, transparent)}
.status i{transition:box-shadow var(--d-state) var(--spring)}

@media (prefers-reduced-motion: reduce){
  /* Today: cards and the people under them hold still */
  .ocard:hover, .ocard:active{transform:none}
  .ocards > .gone{transition:none}
}
@media (prefers-reduced-motion: reduce){
  /* Messages: rows arrive and the list swaps without travel */
  .mrow.arrive > div, .mrow.arrived > div, .mlistsheet .scroll.swap{animation:none}
}
@media (prefers-reduced-motion: reduce){
  /* Pipeline, People, Settings: cards and plans change tone only */
  .dcard:hover, .dcard:active, .mini a:hover, .plan:hover, .plan:active{transform:none}
  .tbl tbody tr.arrive, .tbl tbody tr.arrived{animation:none}
}