@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Google+Sans:wght@400;500;700&family=Google+Sans+Text:wght@400;500&family=Roboto:wght@400;500;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..600,0..1,0&display=swap');

:root{
  /* Material 3 baseline palette */
  --m3-primary:#0b57d0; --m3-on-primary:#fff; --m3-primary-container:#d3e3fd; --m3-on-primary-container:#041e49;
  --m3-surface:#fff; --m3-surface-1:#f7f9ff; --m3-surface-2:#f0f4f9; --m3-surface-3:#e9eef6;
  --m3-outline:#747775; --m3-outline-variant:#c4c7c5;
  --m3-on-surface:#1f1f1f; --m3-on-surface-variant:#444746;
  --blue:#0b57d0; --blue-dark:#0842a0; --blue-bg:#d3e3fd;
  --green:#146c2e; --green-bg:#c4eed0;
  --amber:#a8710a; --amber-bg:#ffdf99;
  --red:#b3261e; --red-bg:#f9dedc;
  --text:#1f1f1f; --text2:#444746; --text3:#747775;
  --border:#c4c7c5; --bg2:#f7f9ff; --bg3:#e9eef6;
  --e1:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --e3:0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
}
*{margin:0; padding:0; box-sizing:border-box;}
.msi{font-family:'Material Symbols Rounded'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-size:20px; -webkit-font-smoothing:antialiased; user-select:none;}
body{font-family:'Google Sans Text','Roboto',Arial,sans-serif; color:var(--text); background:var(--m3-surface); font-size:14px; letter-spacing:.0071em;}
h1,h2,h3,h4,.ov-name,.tl-title,.pc-title{font-family:'Google Sans','Roboto',Arial,sans-serif; letter-spacing:0;}
button{font-family:inherit; cursor:pointer;}
input,textarea{font-family:inherit;}
.hidden{display:none !important;}

/* ============ SIGN IN ============ */
/* Google Accounts sign-in: 1px var(--m3-outline-variant) card, 28px logo row, 24px headline,
   outlined field, blue text link, filled pill on the right. */
#view-signin{min-height:100vh; display:none; flex-direction:column; align-items:center; justify-content:center; background:var(--m3-surface); padding:24px;}
.gcard{width:100%; max-width:448px; min-height:0; display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid var(--m3-outline-variant); border-radius:8px; background:var(--m3-surface); padding:48px 40px 36px;}
.gcard-left{width:100%; padding:0 0 32px; display:flex; flex-direction:column; align-items:center;}
.gcard-right{width:100%; display:flex; flex-direction:column; text-align:left;}
.glogo{display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;}
.glogo .flag-icon{width:24px; height:24px; background:var(--brand-solid); border-radius:6px; display:flex; align-items:center; justify-content:center;}
.flag-icon svg{width:58%; height:58%; fill:var(--brand-on-solid); display:block;}
.glogo span:last-child{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:20px; color:var(--m3-on-surface-variant);}
.gcard-left h1{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:24px; font-weight:400; line-height:1.3333; letter-spacing:0; color:var(--m3-on-surface); margin-bottom:8px;}
.gcard-left p{font-size:16px; line-height:1.5; letter-spacing:.1px; color:var(--m3-on-surface);}
.gcard-right .m3-field{margin-bottom:24px;}
.gcard-right .m3-input{height:56px; border-color:var(--m3-outline-variant); border-radius:var(--r-md); font-size:16px; color:var(--m3-on-surface);}
.gcard-right .m3-input:hover{border-color:var(--m3-on-surface);}
.gcard-right .m3-input:focus{border:2px solid var(--m3-primary);}
.gcard-right .m3-lbl{color:var(--m3-on-surface-variant);}
.gcard-right .m3-input:focus ~ .m3-lbl{color:var(--m3-primary);}
.glink{display:inline-block; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14px; font-weight:500; color:var(--m3-primary); letter-spacing:.25px; cursor:pointer; margin-bottom:28px;}
.glink:hover{text-decoration:underline;}
.auth-err{font-size:13px; color:#d93025; min-height:0; margin:-14px 0 14px;}
.auth-err:empty{margin:0;}
.gsep{display:flex; align-items:center; gap:16px; margin:20px 0;}
.gsep::before, .gsep::after{content:""; flex:1; height:1px; background:var(--m3-outline-variant);}
.gsep span{font-size:12px; letter-spacing:.0333em; color:var(--m3-on-surface-variant); text-transform:uppercase;}
.gcard-right .gnext{width:100%; height:44px;}
.gcard-right .gbtn-g{width:100%; justify-content:center; height:44px;}
.gnew{margin:22px 0 0; text-align:center; font-size:13.5px; color:var(--m3-on-surface-variant);}
.gcard-right .glink{display:inline; margin:0 0 0 4px;}
.gbtn-g{display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 16px; border:1px solid var(--m3-outline-variant); border-radius:100px; background:var(--m3-surface); font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14px; font-weight:500; color:var(--m3-on-surface); letter-spacing:.25px; transition:background-color .15s, box-shadow .15s;}
.gbtn-g:hover{background:var(--m3-surface-1); border-color:var(--m3-primary-container);}
.gbtn-g svg{width:18px; height:18px; flex-shrink:0;}
.gnext{height:36px; padding:0 24px; border:none; border-radius:100px; background:var(--m3-primary); color:var(--m3-on-primary); font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14px; font-weight:500; letter-spacing:.25px; transition:background-color .15s, box-shadow .15s;}
.gnext:hover{background:var(--blue-dark); box-shadow:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);}
.gnext:disabled{background:#e8eaed; color:#9aa0a6; box-shadow:none; cursor:default;}
@media (max-width:750px){
  .gcard{flex-direction:column; min-height:0; padding:40px 24px 28px;}
  .gcard-left{padding:0 0 24px;}
  .gactions{flex-direction:column-reverse; align-items:stretch; gap:12px; margin-top:8px;}
  .gnext{height:40px;}
}

/* ============ SHELL ============ */
#shell{display:none; min-height:100vh;}
#shell.active{display:flex; flex-direction:column;}
.topbar{position:relative; height:64px; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 20px; gap:16px; flex-shrink:0;}
.tb-left{flex:1 1 0; display:flex; align-items:center; gap:16px; min-width:0;}
.tb-right{flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0;}
/* Project name and team sit in the middle column; the phase switch is right */
.tb-center{flex:0 1 auto; display:flex; align-items:center; gap:14px; justify-content:center; min-width:0;}
.topbar .phase-seg{margin:0; flex-shrink:0;}
.topbar .phase-seg .seg-btn{padding:6px 16px; font-size:12.5px;}
.tb-back{display:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:none; background:transparent;}
.tb-back:hover{background:var(--bg3);}
.tb-brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.tb-brand .flag-icon{width:24px; height:24px; background:var(--brand-solid); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--brand-on-solid);}
.tb-brand > span{font-size:19px; color:var(--m3-on-surface-variant); font-weight:400;}
.tb-projname{font-size:17px; font-weight:500; display:none; align-items:center; gap:10px; position:relative;}
.rate-chip{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--green); background:var(--green-bg); padding:5px 12px; border-radius:100px; border:none; cursor:pointer;}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--brand-solid); color:var(--brand-on-solid); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500;}
.sync-chip{display:none; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--green); background:var(--green-bg); padding:6px 13px; border-radius:100px; border:none; cursor:pointer;}
.sync-chip:hover{background:#d5eedc;}

.body-row{display:flex; flex:1; min-height:0;}
.rail{width:76px; border-right:1px solid var(--border); padding:20px 0; display:flex; flex-direction:column; align-items:center; gap:22px; flex-shrink:0;}
.rail-btn.active{background:var(--blue-bg); color:var(--blue);}
.rail-btn span.lbl{font-size:9.5px; font-weight:500;}

.main{flex:1; overflow-y:auto; padding:32px 48px; position:relative;}
/* Center every view (and the tab bar) at a comfortable reading width */
.main > .ptabs, .main > div[id^="view-"]{max-width:1280px; margin-left:auto; margin-right:auto;}

/* ============ PROJECTS LIST ============ */
/* The pane keeps a small top padding because inside a project the tab strip
   sticks to the top and has to sit flush against the bar. The landing page has
   no strip, so it takes the breathing room here instead of on the pane. */
#view-projects{padding-top:22px;}
#view-projects h2{font-size:22px; font-weight:400; margin-bottom:4px;}
#view-projects .sub{color:var(--text2); font-size:13.5px; margin-bottom:28px;}
.proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
.proj-card{border:1px solid var(--border); border-radius:12px; padding:20px; cursor:pointer; transition:box-shadow .15s; position:relative;}
.proj-card:hover{box-shadow:var(--e1);}
.proj-card:hover .proj-del{display:flex;}
.proj-del .msi{font-size:17px;}
.btn-filled.danger{background:var(--red);}
.btn-filled.danger:hover{background:#b3261e;}
.proj-card .dot{width:10px; height:10px; border-radius:50%; margin-bottom:14px;}
.proj-card .dot.g{background:var(--green);}
.proj-card .dot.a{background:var(--amber);}
.proj-card h4{font-size:15px; font-weight:500; margin-bottom:6px;}
.proj-card .meta{font-size:12.5px; color:var(--text2);}
.proj-card .stat{margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:12px; color:var(--text2); display:flex; justify-content:space-between; gap:10px;}
.proj-card .stat span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.new-proj-card{border:1.5px dashed var(--border); border-radius:12px; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text2); cursor:pointer; min-height:130px;}
.new-proj-card:hover{border-color:var(--blue); color:var(--blue);}

/* ============ WIZARD ============ */
#view-wizard{max-width:640px; margin:0 auto;}
.stepper{display:flex; align-items:center; margin-bottom:40px;}
.step-node{display:flex; flex-direction:column; align-items:center; gap:8px;}
.step-circle{width:32px; height:32px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text2); background:var(--m3-surface);}
.step-node.done .step-circle{background:var(--brand-solid); border-color:var(--brand-solid); color:var(--brand-on-solid);}
.step-node.active .step-circle{border-color:var(--blue); color:var(--blue); font-weight:700;}
.step-node .step-lbl{font-size:11.5px; color:var(--text2);}
.step-node.active .step-lbl{color:var(--blue); font-weight:500;}
.step-line{flex:1; height:2px; background:var(--border); margin:0 8px 20px;}
.step-line.done{background:var(--blue);}

.wiz-panel{border:1px solid var(--border); border-radius:12px; padding:36px;}
.wiz-panel h3{font-size:19px; font-weight:400; margin-bottom:8px;}
.wiz-panel>p.desc{color:var(--text2); font-size:13.5px; margin-bottom:26px; line-height:1.5;}
.field-label{font-size:12.5px; font-weight:500; color:var(--text2); margin-bottom:8px;}
.mfield{width:100%; border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:14px; margin-bottom:22px; color:var(--text); outline:none;}
.mfield:focus{border-color:var(--blue);}
textarea.mfield{min-height:120px; resize:vertical; line-height:1.5;}
.cal-opt{display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:10px;}
.cal-opt input[type=checkbox]{width:17px; height:17px; accent-color:var(--blue);}
.cal-opt .t{font-size:13.5px; font-weight:500;}
.cal-opt .s{font-size:11.5px; color:var(--text2);}
.cal-add{border-style:dashed; color:var(--text2); font-size:12.5px; justify-content:center; cursor:pointer;}
.gm-search{display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:100px; padding:8px 16px; margin-bottom:14px;}
.gm-search:focus-within{border-color:var(--blue);}
.gm-search .msi{font-size:18px; color:var(--text3);}
.gm-search input{flex:1; border:none; outline:none; font-size:13px; background:transparent;}
.bfile{display:inline-flex; align-items:center; gap:7px; background:var(--blue-bg); color:var(--blue); border-radius:100px; padding:6px 8px 6px 12px; font-size:12.5px; font-weight:500; margin:0 8px 10px 0;}
.bfile .msi{font-size:15px;}
.bfile button{border:none; background:transparent; color:inherit; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;}
.bfile button .msi{font-size:13px;}
.bfile button:hover{background:rgba(0,0,0,.08);}
.wiz-toggle{margin-top:14px; cursor:pointer; align-items:flex-start; background:var(--bg2); border-style:solid;}
.wiz-toggle input[type=checkbox]{margin-top:2px;}
.wiz-toggle .s{color:var(--text2); font-size:11.5px; line-height:1.5;}
.wiz-toggle:has(input:checked){border-color:var(--blue); background:var(--blue-bg);}
.cal-add:hover{border-color:var(--blue); color:var(--blue);}
.wiz-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:8px;}
.btn-flat{background:transparent; border:none; color:var(--blue); font-weight:500; font-size:14px; padding:10px 16px; border-radius:6px;}
.btn-flat:hover{background:var(--blue-bg);}
.btn-filled{background:var(--blue); border:none; color:#fff; font-weight:500; font-size:14px; padding:10px 22px; border-radius:6px;}
.btn-filled:hover{background:var(--blue-dark);}
.btn-filled:disabled{background:var(--border); cursor:default;}

/* ============ BOARD ============ */
.board-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.board-head h2{font-size:20px; font-weight:400;}
.board-head .actions{display:flex; gap:10px; align-items:center;}
.send-btn{display:flex; align-items:center; gap:8px; background:var(--brand-solid); color:var(--brand-on-solid); border:none; padding:10px 20px; border-radius:6px; font-size:13.5px; font-weight:500;}
.send-btn:hover{background:var(--brand-solid); box-shadow:inset 0 0 0 999px rgba(255,255,255,.12);}
.send-btn:disabled{background:var(--border);}
.send-btn .msi{font-size:18px;}
.paste-btn{display:flex; align-items:center; gap:8px; background:var(--m3-surface); color:var(--blue); border:1px solid var(--border); padding:10px 16px; border-radius:6px; font-size:13.5px; font-weight:500;}
.paste-btn:hover{box-shadow:var(--e1);}
.paste-btn .msi{font-size:18px;}

.confirm-banner{display:none; align-items:center; gap:12px; background:var(--green-bg); border:1px solid #b7dfc4; border-radius:10px; padding:14px 18px; margin-bottom:22px;}
.confirm-banner.show{display:flex;}
.confirm-banner .msi{color:var(--green);}
.confirm-banner .txt{font-size:13.5px;}
.confirm-banner .txt b{color:var(--green); font-size:15px;}

.board{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;}
.col-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--border);}
.col-head h4{font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:var(--text2);}
.col.new .col-head{border-color:var(--red);}
.col.new .col-head h4{color:var(--red);}
.col.assumed .col-head{border-color:var(--amber);}
.col.assumed .col-head h4{color:var(--amber);}
.col.done .col-head{border-color:var(--green);}
.col.done .col-head h4{color:var(--green);}
.count-badge{font-size:11px; color:var(--text2); background:var(--bg3); padding:2px 8px; border-radius:100px;}
.col-empty{font-size:12.5px; color:var(--text3); padding:14px 4px; line-height:1.5;}

.kcard{border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:12px; transition:box-shadow .15s, opacity .3s, border-color .3s; position:relative;}
.kcard:hover{box-shadow:var(--e1);}
.mtg-icon-btn{position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; border:none; background:transparent; color:var(--text3); display:flex; align-items:center; justify-content:center;}
.mtg-icon-btn:hover{background:var(--bg3); color:var(--blue);}
.mtg-icon-btn .msi{font-size:16px;}
.kcard .src{display:flex; justify-content:space-between; font-size:10.5px; color:var(--text3); margin-bottom:8px; padding-right:24px;}
.kcard .title{font-size:13.5px; font-weight:500; margin-bottom:6px; line-height:1.4;}
.kcard .excerpt{font-size:11.5px; color:var(--text2); background:var(--bg2); border-radius:6px; padding:8px 10px; margin-bottom:10px; line-height:1.45;}
.kcard .estimate{font-size:11.5px; color:var(--blue); font-weight:500; margin-bottom:10px;}
.kcard .kactions{display:flex; gap:8px;}
.kcard .kactions button{flex:1; font-size:11px; font-weight:500; padding:7px; border-radius:6px; border:1px solid var(--border); background:var(--m3-surface); color:var(--text2);}
.kcard .kactions button.primary{background:var(--brand-solid); border-color:var(--brand-solid); color:var(--brand-on-solid);}
.kcard .kstate{font-size:11px; color:var(--text2);}
.kcard.confirmed{border-color:#b7dfc4; background:var(--green-bg);}
.kcard.confirmed .title{display:flex; align-items:center; gap:6px;}
.kcard.confirmed .title .msi{color:var(--green); font-size:16px;}
.kcard.done{opacity:.7;}
.kcard.done .title{text-decoration:line-through; text-decoration-color:var(--border);}

/* rate popover */
/* The cost breakdown is a centred dialog, not a dropdown: it is far too tall
   to hang off the chip without running past the bottom of the window */
/* The cost breakdown is a wide dialog, the same width as the settings and add
   project ones. As a narrow column every figure had equal weight and the
   thing people open it for, what the project should be priced at, sat at the
   bottom of a long scroll. */
.pmodal-card.cost-card{width:760px;}
.pmodal-body.cost-pop{padding-bottom:24px;}

/* The three headline figures, across the top */
.cost-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:22px;}
.cost-stat{background:var(--m3-surface-1); border-radius:var(--r-md); padding:14px 16px; display:flex; flex-direction:column; gap:3px;}
.cs-lbl{font-size:11px; font-weight:500; letter-spacing:.045em; text-transform:uppercase; color:var(--text3);}
.cs-big{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:26px; line-height:32px; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.cs-sub{font-size:11.5px; line-height:1.45; color:var(--m3-on-surface-variant);}

.cost-cols{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;}
.cost-col > h4{font-size:11px; font-weight:500; letter-spacing:.045em; text-transform:uppercase; color:var(--text3); margin-bottom:12px;}

/* What the money went on, biggest first, with a bar for the shape of it */
.ck-row{display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:10px; padding:7px 0;}
.ck-row + .ck-row{border-top:1px solid var(--m3-surface-3);}
.ck-name{font-size:13px; color:var(--m3-on-surface);}
.ck-runs{font-size:11px; color:var(--text3); font-variant-numeric:tabular-nums;}
.ck-cost{font-size:13px; font-weight:500; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.ck-bar{grid-column:1 / -1; height:3px; border-radius:100px; background:var(--m3-surface-3); overflow:hidden;}
.ck-bar span{display:block; height:100%; border-radius:100px; background:var(--m3-primary);}
.cost-empty{font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant);}

.cost-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; padding:7px 0; color:var(--m3-on-surface);}
.cost-row + .cost-row{border-top:1px solid var(--m3-surface-3);}
.cost-row b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap;}
.cr-sub{display:block; margin-top:2px; font-size:11.5px; color:var(--m3-on-surface-variant);}
.cost-hr{border-top:1px solid var(--border); margin:10px 0;}

/* The answer, given its own block */
.cost-rec{background:var(--green-bg); border-radius:var(--r-md); padding:16px; margin-top:20px; display:flex; flex-direction:column; gap:2px;}
.cr-lbl{font-size:11px; font-weight:500; letter-spacing:.045em; text-transform:uppercase; color:var(--green);}
.cr-price{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:32px; line-height:38px; color:var(--green); font-variant-numeric:tabular-nums;}
.cr-per{font-size:15px; color:var(--green);}
.cr-note{margin-top:4px; font-size:11.5px; line-height:1.55; color:var(--m3-on-surface-variant);}

.cost-note{display:flex; gap:10px; align-items:flex-start; margin-top:22px; padding-top:14px; border-top:1px solid var(--m3-outline-variant);
  font-size:11.5px; line-height:1.55; color:var(--text3);}
.cost-note .msi{font-size:15px; flex-shrink:0;}

@media (max-width:820px){
  .cost-stats{grid-template-columns:1fr;}
  .cost-cols{grid-template-columns:1fr; gap:24px;}
}
.rate-pop{display:none; position:absolute; top:40px; left:0; background:var(--m3-surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--e2); padding:18px; width:220px; z-index:40;}
.rate-pop.show{display:block;}
.rate-pop .lbl{font-size:12px; color:var(--text2); margin-bottom:8px; font-weight:400;}
.rate-pop .rfield{display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:12px;}
.rate-pop .rfield span{background:var(--bg3); padding:9px 10px; font-size:13px; color:var(--text2);}
.rate-pop .rfield input{border:none; padding:9px 10px; font-size:13px; width:100%; outline:none;}

/* ============ COMPOSE PANEL ============ */
.compose{position:fixed; bottom:0; right:32px; width:420px; background:var(--m3-surface); border:1px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; box-shadow:var(--e3); z-index:100; transform:translateY(120%); transition:transform .28s ease; max-height:70vh; display:flex; flex-direction:column;}
.compose.open{transform:translateY(0);}
.compose-head{background:#f2f6fc; padding:12px 16px; border-radius:10px 10px 0 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border);}
.compose-head span{font-size:13px; font-weight:500;}
.compose-head .icons{display:flex; gap:14px; color:var(--text2);}
.compose-body{padding:14px 18px; overflow-y:auto; flex:1;}
.cf-row{display:flex; align-items:center; border-bottom:1px solid var(--bg3); padding:9px 0; font-size:13px;}
.cf-row .k{color:var(--text2); width:44px; flex-shrink:0;}
.cf-row .v{font-weight:500;}
.compose-subj{font-size:14.5px; font-weight:500; padding:14px 0 10px; border-bottom:1px solid var(--bg3);}
.compose-sect{margin-top:16px;}
.compose-sect .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text2); margin-bottom:8px; font-weight:500;}
.compose-li{font-size:13px; padding:6px 0; display:flex; align-items:center; gap:8px;}
.compose-li .msi{font-size:16px;}
.compose-li.new .msi{color:var(--red);}
.compose-li.done .msi{color:var(--green);}
.compose-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.compose-send{background:var(--brand-solid); color:var(--brand-on-solid); border:none; padding:10px 26px; border-radius:20px; font-size:13.5px; font-weight:500;}
.compose-send:hover{background:var(--brand-solid); box-shadow:inset 0 0 0 999px rgba(255,255,255,.12);}
.compose-sim{font-size:11.5px; color:var(--text2); background:transparent; border:1px dashed var(--border); border-radius:20px; padding:8px 12px;}

/* snackbar */
.snackbar{position:fixed; bottom:24px; left:32px; background:#323232; color:#fff; padding:14px 22px; border-radius:8px; font-size:13.5px; box-shadow:var(--e2); display:flex; align-items:center; gap:14px; z-index:200; opacity:0; transform:translateY(20px); transition:opacity .25s, transform .25s; pointer-events:none;}
.snackbar.show{opacity:1; transform:translateY(0);}

/* REPLY PROMPT (Gmail sidebar-style) */
.gsidebar{position:fixed; top:80px; right:32px; width:280px; background:var(--m3-surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--e2); z-index:150; opacity:0; transform:translateX(20px) scale(.97); pointer-events:none; transition:opacity .25s, transform .25s;}
.gsidebar.show{opacity:1; transform:translateX(0) scale(1); pointer-events:auto;}
.gs-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); font-size:12.5px; font-weight:500; color:var(--text2); background:var(--bg2); border-radius:10px 10px 0 0;}
.gs-head .flag-icon{width:18px; height:18px; background:var(--brand-solid); border-radius:5px; display:flex; align-items:center; justify-content:center; color:var(--brand-on-solid);}
.gs-body{padding:14px;}
.gs-context{font-size:12px; color:var(--text2); margin-bottom:8px;}
.gs-context b{color:var(--text);}
.gs-mail{font-size:12.5px; font-style:italic; color:var(--text); background:var(--bg2); border-radius:8px; padding:10px 12px; margin-bottom:14px; line-height:1.5;}
.gs-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text3); margin-bottom:8px; font-weight:500;}
.gs-item{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:6px 0;}
.gs-item .msi{font-size:15px; color:var(--red);}

/* SIDE SHEETS */
.sheet-backdrop{position:fixed; inset:0; background:rgba(32,33,36,.4); z-index:250; opacity:0; pointer-events:none; transition:opacity .2s;}
.sheet-backdrop.show{opacity:1; pointer-events:auto;}
.side-sheet{position:fixed; top:0; right:0; height:100%; width:420px; max-width:90vw; background:var(--m3-surface); box-shadow:var(--e3); z-index:260; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column;}
.side-sheet.show{transform:translateX(0);}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); flex-shrink:0;}
.sheet-head h3{font-size:16px; font-weight:500;}
.sheet-close{width:34px; height:34px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--text2);}
.sheet-close:hover{background:var(--bg3);}
.sheet-body{padding:22px; overflow-y:auto; flex:1;}
.sheet-meta{display:flex; align-items:center; gap:16px; margin-bottom:20px; font-size:12.5px; color:var(--text2);}
.sheet-meta .m-item{display:flex; align-items:center; gap:5px;}
.sheet-meta .msi{font-size:16px; color:var(--text3);}
.sheet-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text3); font-weight:500; margin-bottom:10px;}
.sheet-highlight{background:var(--amber-bg); border-left:3px solid var(--amber); border-radius:0 8px 8px 0; padding:12px 14px; font-size:13.5px; line-height:1.55; margin-bottom:22px;}
.transcript-box{background:var(--bg2); border-radius:10px; padding:14px 16px; font-size:12.5px; line-height:2; color:var(--text2); max-height:300px; overflow-y:auto;}
.transcript-box .tline{margin-bottom:4px;}
.transcript-box .tline b{color:var(--text); font-weight:500;}
.transcript-box .tline.hit{background:var(--amber-bg); border-radius:4px; padding:2px 6px; margin:0 -6px;}
.tl-row2{display:flex; gap:14px; padding-bottom:22px; position:relative;}
.tl-row2::before{content:""; position:absolute; left:9px; top:22px; bottom:-4px; width:1.5px; background:var(--border);}
.tl-row2:last-child::before{display:none;}
.tl-dot{width:20px; height:20px; border-radius:50%; background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;}
.tl-dot.pending{background:var(--amber-bg); color:var(--amber);}
.tl-dot.failed{background:var(--red-bg); color:var(--red);}
.tl-dot .msi{font-size:13px;}
.tl-content .t{font-size:13px; font-weight:500;}
.tl-content .s{font-size:11.5px; color:var(--text2); margin-top:2px;}
.sync-summary{display:flex; align-items:center; gap:10px; background:var(--green-bg); border-radius:10px; padding:14px 16px; margin-bottom:24px;}
.sync-summary .msi{color:var(--green); font-size:22px;}
.sync-summary .txt{font-size:13px;}
.sync-summary .txt b{display:block; font-size:14.5px;}

/* ============ PROJECT TABS ============ */
.ptabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:26px;}
.ptab{display:flex; align-items:center; gap:7px; border:none; background:transparent; color:var(--text2); font-size:13.5px; font-weight:500; padding:12px 18px; border-radius:8px 8px 0 0; position:relative;}
.ptab .msi{font-size:18px;}
.ptab:hover{background:var(--bg2); color:var(--text);}
.ptab.active{color:var(--blue);}
.ptab.active::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:3px; background:var(--blue); border-radius:3px 3px 0 0;}
.ptab-badge{font-size:10.5px; font-weight:500; background:var(--bg3); color:var(--text2); border-radius:100px; padding:1px 7px;}
.ptab-badge:empty{display:none;}
.ptab.active .ptab-badge{background:var(--blue-bg); color:var(--blue);}

.tabhead{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px;}
.tabhead h2{font-size:20px; font-weight:400;}
.tabhead .sub2{font-size:12.5px; color:var(--text2); margin-top:3px;}

/* calls timeline */
.tl-node{display:flex; gap:18px;}
.tl-rail{display:flex; flex-direction:column; align-items:center; width:40px; flex-shrink:0;}
.tl-dot2{width:40px; height:40px; border-radius:50%; background:var(--blue-bg); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;}
.tl-dot2 .msi{font-size:19px;}
.tl-rail::after{content:""; flex:1; width:2px; background:var(--border); margin-top:4px;}
.tl-node:last-child .tl-rail::after{display:none;}
.tl-card{flex:1; border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin-bottom:22px; cursor:pointer; transition:box-shadow .15s; min-width:0;}
.tl-card:hover{box-shadow:var(--e1);}
.tl-node.busy .tl-card{border-style:dashed;}
.tl-top{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.tl-headmain{min-width:0;}
.tl-mini{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.tl-mini .chev{color:var(--text3); font-size:20px;}
.tl-body{margin-top:4px;}
.tl-card.open{box-shadow:var(--e1);}
.tl-open{border:none; background:transparent; cursor:pointer;}
.tl-date{font-size:11.5px; font-weight:500; color:var(--blue); text-transform:uppercase; letter-spacing:.04em;}
.tl-title{font-size:14.5px; font-weight:500; margin-top:3px; line-height:1.4;}
.tl-att{font-weight:400; color:var(--text2); font-size:12px; margin-left:6px;}
.tl-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); font-weight:500; margin:12px 0 6px;}
.tl-bullet{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; padding:3px 0;}
.tl-b{width:7px; height:7px; border-radius:50%; margin-top:6px; flex-shrink:0;}
.tl-b.n{background:var(--blue);}
.tl-b.a{background:var(--amber);}
.tl-b.g{background:var(--green);}
.tl-btxt{flex:1; min-width:0;}
.tl-bullet:hover .tl-tobase{display:inline-flex;}
.tl-tobase .msi{font-size:13px;}
.tl-chips{display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap;}
.tl-open{margin-right:auto; display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:500; color:var(--blue);}

/* ============ CALLS ============ */
.calls-list{max-width:none;}
.call-row{display:flex; align-items:center; gap:16px; border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:12px; cursor:pointer; transition:box-shadow .15s;}
.call-row:hover{box-shadow:var(--e1);}
.call-ic{width:40px; height:40px; border-radius:50%; background:var(--blue-bg); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.call-ic .msi{font-size:20px;}
.call-main{flex:1; min-width:0;}
.call-main .t{font-size:14px; font-weight:500; margin-bottom:3px;}
.call-main .s{font-size:12px; color:var(--text2);}
.call-chip{font-size:11px; font-weight:500; padding:4px 10px; border-radius:100px; background:var(--bg3); color:var(--text2);}
.call-chip.flags{background:var(--red-bg); color:var(--red);}
.call-chip.tasks{background:var(--amber-bg); color:#b06000;}
.call-chip.processing{background:var(--blue-bg); color:var(--blue); display:inline-flex; align-items:center; gap:7px;}
.call-chip.failedchip{background:var(--red-bg); color:var(--red);}
.call-row.busy{border-style:dashed;}
.pt-spinner.tiny{width:14px; height:14px; border-width:2px; display:inline-block; flex-shrink:0;}
.call-row .msi.chev{color:var(--text3); font-size:20px;}

/* auth */
.auth-err{font-size:12.5px; min-height:16px; margin-bottom:6px; text-align:left;}

/* ============ TEAM FACEPILE ============ */
.teamwrap{position:relative; display:none;}
.facepile{display:flex; align-items:center; cursor:pointer; padding-left:8px;}
.fp-av{width:32px; height:32px; border-radius:50%; color:var(--m3-on-surface); font-size:11.5px; font-weight:500; display:flex; align-items:center; justify-content:center; border:2px solid #fff; margin-left:-8px; box-shadow:var(--e1); flex-shrink:0;}
.fp-av.client{outline:1.5px solid var(--amber);}
.fp-av.more{background:var(--bg3); color:var(--text2);}
.fp-av.add{background:var(--m3-surface); color:var(--blue); border:1.5px dashed var(--blue);}
.fp-av.add .msi{font-size:18px;}
.fp-av.small{width:30px; height:30px; margin-left:0; border:none; box-shadow:none; font-size:11px;}
.facepile:hover .fp-av{transform:translateY(-1px);}
.team-panel{display:none; position:absolute; right:0; top:44px; width:340px; background:var(--m3-surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--e3); z-index:60; overflow:hidden;}
.teamwrap.open .team-panel{display:block;}
.tp-head{font-size:13px; font-weight:500; padding:14px 18px 8px;}
.tp-list{max-height:300px; overflow-y:auto; padding:0 10px;}
.tp-row{display:flex; align-items:center; gap:10px; padding:8px;border-radius:10px;}
.tp-row:hover{background:var(--bg2);}
.tp-main{flex:1; min-width:0;}
.tp-main .t{font-size:13px; font-weight:500;}
.tp-main .s{font-size:11.5px; color:var(--text2);}
.tp-side{border:none; border-radius:100px; padding:4px 10px; font-size:10.5px; font-weight:500; background:var(--blue-bg); color:var(--blue); cursor:pointer; flex-shrink:0;}
.tp-side.client{background:var(--amber-bg); color:#7a4f01;}
.tp-main[data-tmedit]{cursor:pointer;}
.tp-edit-btn{border:none; background:transparent; color:var(--text3); width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.tp-row:hover .tp-edit-btn{display:flex;}
.tp-edit-btn:hover{background:var(--bg3); color:var(--blue);}
.tp-edit-btn .msi{font-size:14px;}
.tp-row.editing{align-items:flex-start; background:var(--bg2);}
.tp-editform{flex:1; display:flex; flex-direction:column; gap:8px;}
.tp-editform .mfield{margin-bottom:0; padding:7px 10px; font-size:12.5px; background:var(--m3-surface);}
.tp-editactions{display:flex; justify-content:flex-end; gap:6px;}
.tp-editactions .btn-flat{padding:6px 12px; font-size:12px;}
.tp-editactions .btn-filled{padding:6px 14px; font-size:12px;}
.tp-del{border:none; background:transparent; color:var(--text3); width:24px; height:24px; border-radius:50%; display:none; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.tp-row:hover .tp-del{display:flex;}
.tp-del:hover{background:var(--bg3); color:var(--red);}
.tp-del .msi{font-size:15px;}
.tp-add{border-top:1px solid var(--border); padding:12px 18px 14px; background:var(--bg2);}
.tp-add-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.tp-add-row:last-child{margin-bottom:0; justify-content:space-between;}
.tp-add .mfield{margin-bottom:0; padding:8px 10px; font-size:12.5px; background:var(--m3-surface);}
.tp-add .btn-filled{padding:7px 16px; font-size:12.5px;}
.team-cb{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); white-space:nowrap;}
.team-cb input{accent-color:var(--blue);}

/* profile modal */
.pf-avatar{width:64px; height:64px; border-radius:50%; background:var(--brand-solid); color:var(--brand-on-solid); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:500; overflow:hidden; flex-shrink:0;}
.pf-avatar img{width:100%; height:100%; object-fit:cover;}
.avatar{cursor:pointer; overflow:hidden;}
.avatar img{width:100%; height:100%; object-fit:cover;}

/* skeleton shimmer while a project sets up */
@keyframes skshimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.sk{background:linear-gradient(90deg, var(--bg3) 25%, #e8eaed 37%, var(--bg3) 63%); background-size:800px 100%; animation:skshimmer 1.3s infinite linear; border-radius:6px;}
.sk-line{height:12px; margin:7px 0;}
.sk-box{border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px;}
@keyframes skpulse{0%,100%{opacity:.35;}50%{opacity:.9;}}
.fp-av.sk-pulse{animation:skpulse 1.4s infinite ease-in-out;}

/* baseline tab */
#baselineBody{max-width:none;}
.bl-split{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
@media (max-width: 980px){ .bl-split{grid-template-columns:1fr;} }
.bl-col{min-width:0;}
.bl-row{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--border); border-radius:12px; padding:13px 16px; margin-bottom:10px;}
.bl-row .msi{font-size:18px; margin-top:1px;}
.bl-row.in .msi{color:var(--green);}
.bl-row.out .msi{color:var(--red);}
.bl-row.out .bl-text{color:var(--text2);}
.bl-text{flex:1; font-size:13.5px; line-height:1.5;}
.bl-src{font-size:10.5px; font-weight:500; color:var(--text3); background:var(--bg3); border-radius:100px; padding:3px 9px; white-space:nowrap;}

/* call detail modal */
#callModal{padding:5vh 6vw;}
.pmodal-card.call-card{width:100%; max-width:none; height:100%; max-height:none; border-radius:16px;}
.cd-meta{font-size:12px; color:var(--text2); margin-top:4px;}
.cd-text.plain{color:var(--text3); font-style:italic;}

/* call modal segments */
.cd-seg{display:flex; width:max-content; margin:2px 26px 14px; border:1px solid var(--border); border-radius:100px; overflow:hidden;}
/* The 26px side margin above is for the call sheet, which has no padding of its
   own. A modal body already pads its sides, so inside one the margin doubles up
   and the control sits inset from every field above and below it. */
.pmodal-body > .cd-seg{margin-left:0; margin-right:0;}
.seg-btn{border:none; background:var(--m3-surface); padding:8px 26px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer;}
.seg-btn.active{background:var(--blue-bg); color:var(--blue);}
.cd-content{flex:1; min-height:0; overflow-y:auto; padding:18px 26px; border-top:1px solid var(--border);}
.cd-asks{max-width:980px;}
.cd-asks .tl-bullet{font-size:13.5px; padding:6px 0;}

/* asked by client (user stories) */
#storiesList{max-width:none;}
.story-row{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px;}
.story-ic{color:var(--blue); font-size:18px; margin-top:1px;}
.story-main{flex:1; min-width:0;}
.story-main .t{font-size:13.5px; line-height:1.55;}
.story-main .t b{font-weight:500; color:var(--blue-dark);}
.story-main .src{font-size:10.5px; color:var(--text3); margin-top:4px;}
.story-row .tp-del{display:none;}
.story-row:hover .tp-del{display:flex;}

/* questions tab */
.task-cat-lbl2{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); margin:22px 0 10px; max-width:none;}
.task-cat-lbl2:first-child{margin-top:0;}
.task-cat-lbl2 .msi{font-size:16px; color:var(--blue);}
#questionsOpen,#questionsAsked{max-width:none;}
.q-row .task-check{margin-top:1px;}
.q-row.asked .task-check{background:var(--green); border-color:var(--green); color:#fff;}
.q-row.asked .t{text-decoration:line-through; color:var(--text2); font-weight:400;}
.q-main .why{display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--text2); margin-top:5px; line-height:1.5;}
.q-main .why .msi{font-size:14px; color:var(--text3); margin-top:1px;}
.q-row .tp-del{display:flex;}
.q-row .bl-src{margin-top:2px;}

/* linear task groups with collapsible headers */
#tasksOpen .tgroup{max-width:none; margin-bottom:14px;}
.tgroup-head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); padding:8px 4px; cursor:pointer; border-radius:8px; user-select:none;}
.tgroup-head:hover{background:var(--bg2);}
.tgroup-head .chev{font-size:18px; color:var(--text3);}
.tgroup-head .cat{font-size:16px; color:var(--blue);}
.tgroup-head .bt{flex:1;}
.tgroup .task-row{max-width:none;}

/* task bento grid */
.bento-head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); padding-bottom:8px;}
.bento-head .msi{font-size:17px; color:var(--blue);}
.bento-head .bt{flex:1;}
.bento-card .task-row{border:none; border-top:1px solid var(--bg3); border-radius:0; margin-bottom:0; padding:11px 2px;}

/* ============ TASKS ============ */
#tasksOpen,#tasksDone{max-width:none;}
.task-row{display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px; padding:13px 16px; margin-bottom:10px;}
.task-check{width:22px; height:22px; border-radius:50%; border:2px solid var(--border); background:var(--m3-surface); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:transparent; padding:0;}
.task-check:hover{border-color:var(--blue);}
.task-check .msi{font-size:15px;}
.task-row.done .task-check{background:var(--green); border-color:var(--green); color:#fff;}
.task-main{flex:1; min-width:0;}
.task-main .t{font-size:13.5px; font-weight:500;}
.task-row.done .t{text-decoration:line-through; color:var(--text2); font-weight:400;}
.task-main .s{font-size:11.5px; color:var(--text2); margin-top:2px;}
.task-owner{font-size:11px; font-weight:500; padding:4px 10px; border-radius:100px; background:var(--blue-bg); color:var(--blue); flex-shrink:0;}
.task-sec-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text3); font-weight:500; margin:22px 0 12px;}
.task-src-btn{border:none; background:transparent; color:var(--text3); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.task-src-btn:hover{background:var(--bg3); color:var(--blue);}
.task-src-btn .msi{font-size:16px;}

.task-ask{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--m3-surface); color:var(--blue); font-size:11px; font-weight:500; padding:5px 10px; border-radius:100px; cursor:pointer; flex-shrink:0;}
.task-ask:hover{background:var(--blue-bg); border-color:var(--blue);}
.task-ask .msi{font-size:14px;}

/* ============ 30/70 SPLIT: co-pilot left ============ */
.main > #projectSplit{max-width:1700px;}
.proj-split{display:grid; grid-template-columns:var(--split-main, 70fr) 14px var(--split-side, 30fr); gap:8px; align-items:start;}
/* The Co-pilot is first in the DOM but sits on the right, so every child is
   pinned to row 1: auto-placement would otherwise wrap the workspace below. */
.ps-main{grid-column:1; grid-row:1;}
.ps-divider{grid-column:2; grid-row:1;}
.ps-side{grid-column:3; grid-row:1;}
/* Minimised: the workspace takes the full width and a pill brings it back */
.proj-split.cop-min{grid-template-columns:1fr;}
.proj-split.cop-min .ps-side, .proj-split.cop-min .ps-divider{display:none;}
.proj-split.cop-min .ps-main{grid-column:1;}
.cp-min{margin-left:auto; width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--text3); display:flex; align-items:center; justify-content:center;}
.cp-min:hover{background:var(--bg3); color:var(--text);}
.cp-min .msi{font-size:18px;}
.cop-restore{display:none; order:3; margin-left:auto; flex-shrink:0; align-self:center; z-index:5; align-items:center; gap:8px; height:36px; padding:0 16px; border:1px solid var(--m3-outline-variant); border-radius:100px; background:var(--m3-surface); color:var(--m3-primary); font-size:13.5px; font-weight:500;}
.cop-restore .msi{font-size:18px;}
.cop-restore.show{display:inline-flex;}
.cop-restore:hover{background:var(--m3-primary-container); border-color:transparent;}
.ps-divider{width:14px; align-self:stretch; cursor:col-resize; display:flex; align-items:center; justify-content:center; border-radius:8px;}
.ps-divider::after{content:""; width:4px; height:56px; border-radius:100px; background:var(--border); transition:background .15s;}
.ps-divider:hover::after, .proj-split.resizing .ps-divider::after{background:var(--blue);}
.proj-split.resizing{user-select:none;}
.ps-main{min-width:0; border:1px solid var(--border); border-radius:16px; background:var(--m3-surface); padding:22px 26px; min-height:calc(100vh - 128px);}
.ps-side{position:sticky; top:0; height:calc(100vh - 128px); min-width:0; border:1px solid var(--border); border-radius:16px; background:var(--m3-surface); padding:20px; display:flex;}
.ps-side #view-copilot{display:block !important; flex:1; min-width:0;}
.ps-side .cop-grid{display:flex; flex-direction:column-reverse; gap:14px; height:100%;}
.ps-side .cop-side{position:static; height:auto;}
.ps-side .pain-widget{height:auto; max-height:280px;}
.ps-side .cp-wrap{flex:1; min-height:0; display:flex; flex-direction:column; max-width:none;}
.ps-side .cp-thread{flex:1; overflow-y:auto; min-height:0;}
@media (max-width: 1150px){ .proj-split{grid-template-columns:1fr !important;} .ps-divider{display:none;} .ps-side{position:static; height:auto;} .ps-side .cp-wrap{min-height:380px;} }

/* ============ CO-PILOT + PAIN WIDGET ============ */
.cop-grid{display:block;}
@media (max-width: 1100px){ .cop-grid{grid-template-columns:1fr;} }
.cop-side #sinceList .tl-bullet{font-size:12.5px; padding:5px 0;}
.sl-head .msi{font-size:15px; color:var(--blue);}
.sl-head .count-badge{margin-left:auto;}
.pain-widget.collapsed{padding-bottom:12px;}
.pain-widget.collapsed .pw-sub{margin-bottom:0;}
.pw-head > .msi{color:var(--red); font-size:19px;}
.pw-scan .msi{font-size:17px;}
.pw-main .src{font-size:10px; color:var(--text3); margin-top:4px;}
.pain-row .tp-del{display:none;}
.pain-row:hover .tp-del{display:flex;}
#painList{max-height:300px; overflow-y:auto;}

.cp-wrap{display:flex; flex-direction:column; min-height:calc(100vh - 220px); min-width:0;}
.cp-thread{flex:1;}
.cp-msg{display:flex; gap:12px; margin-bottom:18px;}
.cp-msg .cp-av{width:30px; height:30px; border-radius:50%; background:var(--brand-solid); color:var(--brand-on-solid); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.cp-msg .cp-av .msi{font-size:17px;}
.cp-msg .bubble{background:var(--bg2); border-radius:4px 16px 16px 16px; padding:13px 16px; font-size:13.5px; line-height:1.6; max-width:85%;}
.cp-msg .bubble b{font-weight:500;}
.cp-msg .bubble .cp-li{display:flex; gap:8px; padding:3px 0;}
.cp-msg .bubble .cp-li .msi{font-size:15px; color:var(--text3); margin-top:2px;}
.cp-msg.user{justify-content:flex-end;}
.cp-msg.user .bubble{background:var(--brand-solid); color:var(--brand-on-solid); border-radius:16px 4px 16px 16px;}
.cp-msg .bubble.thinking{color:var(--text2); display:flex; align-items:center; gap:10px;}
.cp-creep{display:flex; gap:10px; align-items:flex-start; background:var(--red-bg); border-left:3px solid var(--red); border-radius:0 10px 10px 0; padding:10px 12px; line-height:1.5;}
.cp-creep .msi{color:var(--red); font-size:18px; margin-top:1px;}
.cp-dots{display:inline-flex; gap:4px;}
.cp-dots span{width:6px; height:6px; border-radius:50%; background:var(--blue); animation:cpdot 1.2s infinite ease-in-out;}
.cp-dots span:nth-child(2){animation-delay:.15s;}
.cp-dots span:nth-child(3){animation-delay:.3s;}
@keyframes cpdot{0%,60%,100%{opacity:.25; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}
.cp-act{display:inline-flex; align-items:center; gap:6px; margin:8px 8px 0 0; border:1px solid var(--border); background:var(--m3-surface); color:var(--blue); font-size:12px; font-weight:500; padding:7px 14px; border-radius:100px;}
.cp-act:hover{background:var(--blue-bg);}
.cp-act .msi{font-size:15px;}
.cp-chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px;}
.cp-chip{border:1px solid var(--border); background:var(--m3-surface); color:var(--text2); font-size:12.5px; padding:8px 15px; border-radius:100px;}
.cp-chip:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-bg);}
.cp-inputrow{display:flex; gap:10px; align-items:center; border:1px solid var(--border); border-radius:100px; padding:6px 6px 6px 20px;}
.cp-inputrow:focus-within{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue);}
.cp-inputrow input{flex:1; border:none; outline:none; font-size:13.5px; background:transparent;}
.cp-send{width:38px; height:38px; border-radius:50%; border:none; background:var(--brand-solid); color:var(--brand-on-solid); display:flex; align-items:center; justify-content:center;}
.cp-send:hover{background:var(--brand-solid); box-shadow:inset 0 0 0 999px rgba(255,255,255,.12);}
.cp-send .msi{font-size:17px;}

.engine-note{font-size:11.5px; color:var(--text3); margin-top:10px; line-height:1.5;}

/* ============ ADD TRANSCRIPT MODAL ============ */
.pmodal{position:fixed; inset:0; background:rgba(32,33,36,.45); z-index:280; display:none; align-items:center; justify-content:center; padding:24px;}
.pmodal.show{display:flex;}
.pmodal-card{background:var(--m3-surface); border-radius:16px; box-shadow:var(--e3); width:760px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column;}
.pmodal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 26px 12px;}
.pmodal-head h3{font-size:18px; font-weight:500;}
.pmodal-body{padding:6px 26px 0; overflow-y:auto;}
.pmodal-body .pt-text{min-height:260px; margin-bottom:16px;}
.pt-optrow{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pt-optrow .mfield{margin-bottom:8px;}
.pmodal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 20px;}
.pmodal-progress{display:none; flex-direction:column; align-items:center; justify-content:center; padding:64px 26px; gap:16px;}
.pmodal.busy .pmodal-body, .pmodal.busy .pmodal-foot{display:none;}
.pmodal.busy .pmodal-progress{display:flex;}
.pt-spinner{width:40px; height:40px; border-radius:50%; border:3.5px solid var(--blue-bg); border-top-color:var(--blue); animation:ptspin .9s linear infinite;}
@keyframes ptspin{to{transform:rotate(360deg);}}
.pt-stage{font-size:15px; font-weight:500; min-height:22px; transition:opacity .3s;}
.pt-stage.fade{opacity:0;}
.pt-substage{font-size:12px; color:var(--text3);}

/* selection ask pill */
.sel-ask{position:fixed; z-index:500; display:none; align-items:center; gap:7px; background:var(--m3-on-surface); color:#fff; border:none; border-radius:100px; padding:9px 16px; font-size:12.5px; font-weight:500; box-shadow:var(--e3); cursor:pointer;}
.sel-ask.show{display:inline-flex;}
.sel-ask .msi{font-size:15px; color:#8ab4f8;}
.sel-ask:hover{background:var(--m3-on-surface);}

/* pain lines (no filled rows) */
.pain-line .tp-del{display:none; margin-left:auto;}
.pain-line:hover .tp-del{display:flex;}

/* pains tab lines */
#painsTabList{max-width:1000px;}
.pl-detail{font-size:12px; color:var(--text2); margin-top:2px; line-height:1.5;}
#painsTabList .tl-b{margin-top:7px;}
#painsTabList .bl-src{margin-top:3px;}

/* chat stubs */
/* suggestion chips wrap into a tidy stack */
.cp-stubs{flex-wrap:wrap;
display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.cp-stub{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--m3-surface); color:var(--text2); font-size:12px; padding:7px 13px; border-radius:100px; cursor:pointer;}
.cp-stub:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-bg);}
.cp-stub .msi{font-size:15px;}

/* expandable pain/opportunity lines */
.pain-line.open{background:var(--bg2);}
.pl-actions{display:flex; align-items:center; gap:12px; margin-top:8px;}
.pl-actions .cp-stub{padding:5px 11px; font-size:11.5px;}

/* pain icons */
.pl-ic{font-size:19px; margin-top:1px; flex-shrink:0; width:26px; text-align:center;}

/* project milestone timeline */
.tl-panel{max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--bg2); border-bottom:1px solid transparent;}
.tl-panel.open{max-height:170px; border-bottom-color:var(--border);}
.tlp-track{position:relative; height:88px; margin:22px 64px 14px;}
.tlp-line{position:absolute; left:0; right:0; top:26px; height:2px; background:var(--border);}
.tlp-mark{position:absolute; top:14px; transform:translateX(-50%); text-align:center; z-index:2;}
.tlp-mark .msi{font-size:16px; color:var(--brand-on-solid); background:var(--brand-solid); border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;}
.tlp-mark .lbl{font-size:11px; font-weight:500; margin-top:6px; line-height:1.4; white-space:nowrap;}
.tlp-mark .lbl span{font-weight:400; color:var(--text3); font-size:10px;}
.tlp-dot{position:absolute; top:22px; width:10px; height:10px; border-radius:50%; background:var(--m3-surface); border:2.5px solid var(--blue); transform:translateX(-50%); cursor:pointer; z-index:3;}
.tlp-dot:hover{background:var(--blue-bg);}

/* stroked expanded pain story + serif quotes */
.pain-line.open{background:var(--m3-surface); border:1.5px solid var(--blue); border-radius:14px; padding:14px 16px;}

/* pain bento */
.pain-bento{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; align-items:stretch; max-width:none;}
.pain-bento .pain-card{display:flex; flex-direction:column;}
.pain-card{border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; transition:box-shadow .15s; background:var(--m3-surface); min-width:0;}
.pain-card:hover{box-shadow:var(--e1);}
.pain-card.open{grid-column:1 / -1; box-shadow:var(--e1);}
.pc-head{display:flex; align-items:flex-start; gap:10px;}
.pc-title{flex:1; font-size:13.5px; font-weight:500; line-height:1.4; min-width:0;}
.pc-teaser{font-size:12.5px; color:var(--m3-on-surface-variant); line-height:19px; margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.pain-card .pc-title{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.pain-card .tp-del{display:none;}
.pain-card:hover .tp-del{display:flex;}

/* opportunities tab reuses pain bento with green lightbulbs */

/* co-pilot pane title */
.cp-title{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:500; padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--border);}
.cp-title .msi{font-size:19px; color:var(--blue);}

/* timeline month ticks */
.tlp-tick{position:absolute; top:20px; width:1px; height:14px; background:var(--border); transform:translateX(-50%);}
.tlp-tick span{position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:9.5px; color:var(--text3);}

/* important calls on the timeline */
.tlp-dot.hot{border-color:var(--red); background:var(--red-bg); width:12px; height:12px; top:21px;}
.tlp-dot.hot:hover{background:var(--red); }

/* timeline range segments */
.tlp-head{display:flex; justify-content:flex-end; padding:12px 64px 0;}
.tlp-seg{margin:0;}
.tlp-seg .seg-btn{padding:5px 16px; font-size:11.5px;}
.tlp-track{margin-top:6px;}

/* AI source-peek stars */
.src-star{display:none; border:none; background:transparent; color:var(--blue); width:22px; height:22px; border-radius:50%; cursor:pointer; vertical-align:middle; margin-left:6px; padding:0;}
.src-star .msi{font-size:15px;}
.src-star:hover{background:var(--blue-bg);}
.task-row:hover .src-star, .pain-card:hover .src-star, .story-row:hover .src-star, .tl-bullet:hover .src-star{display:inline-flex; align-items:center; justify-content:center;}
/* Reading the transcript itself. Georgia upright rather than italic: a whole
   panel set in italic is slower to read than the thing it is quoting, and the
   point of this panel is to be read. Wide and airy, because it is prose. */
.src-peek{position:fixed; z-index:600; display:none; width:560px; max-width:92vw; background:var(--m3-surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--e3); padding:22px 26px 20px;}
.src-peek.show{display:block;}
.sp-head{display:flex; align-items:flex-start; gap:9px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  line-height:1.5; color:var(--text3); margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--m3-outline-variant);}
.sp-head .msi{font-size:15px; color:var(--m3-primary); flex-shrink:0;}
.sp-line{font-family:Georgia, 'Times New Roman', serif; font-size:15px; line-height:1.75; padding:7px 0; color:var(--m3-on-surface);}
/* The matched lines, in the account's own colour rather than a fixed amber */
.sp-line.hit{color:var(--m3-on-primary-container); background:var(--m3-primary-container);
  border-radius:10px; padding:12px 16px; margin:8px -16px;}
.sp-line.plain{font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:12.5px; line-height:1.6; color:var(--text3); padding:4px 0;}
.sp-open{margin-top:18px;}

/* timeline earlier indicator */
.tlp-earlier{position:absolute; left:0; top:44px; font-size:10px; color:var(--text3); font-weight:500;}

/* ask bullets: full text up to 2 lines */
.tl-btxt{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* opportunity kind + service tags */
.opp-kind{font-size:10px; font-weight:500; border-radius:100px; padding:3px 9px; white-space:nowrap; flex-shrink:0;}
.opp-kind.pitch{background:var(--blue-bg); color:var(--blue);}
.opp-kind.upsell{background:var(--green-bg); color:var(--green);}
.opp-kind.solve{background:var(--amber-bg); color:#7a4f01;}
.opp-svc{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text2); margin-top:7px;}
.opp-svc .msi{font-size:14px; color:var(--green);}

.opp-new{font-size:10px; font-weight:500; background:var(--red-bg); color:var(--red); border-radius:100px; padding:2px 8px; margin-left:8px;}

/* client quotes purple, our capabilities green */
.q-client{color:#7438d2; font-weight:500;}
.q-ours{color:var(--green); font-weight:500;}

/* overview tab */
.ov-fact .msi{font-size:19px; color:var(--blue); margin-top:2px;}
.ov-about{font-size:14px; color:var(--m3-on-surface-variant); line-height:22px; letter-spacing:.0142857em; margin-top:16px; padding-top:16px; border-top:1px solid var(--m3-outline-variant); max-width:none;}

/* compact overview */
.ov-name{font-size:20px; font-weight:500;}
.ov-desig{font-size:13px; font-weight:400; color:var(--text2); margin-left:12px;}
.ov-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:10px; font-size:13px; color:var(--text2);}
.ov-meta > span{display:inline-flex; align-items:center; gap:6px;}
.ov-meta .msi{font-size:16px; color:var(--blue);}
.ov-pillrow{display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; margin-top:16px;}
/* Label sits on its own line, pills wrap beneath it */
.ov-plabel{flex:0 0 100%; font-size:11px; line-height:16px; text-transform:uppercase; letter-spacing:.045em; color:var(--m3-on-surface-variant); font-weight:500; margin:0 0 4px;}
.ov-pill{font-size:12px; font-weight:500; border-radius:100px; padding:5px 13px;}
.ov-pill.in{background:var(--blue-bg); color:var(--blue);}
.ov-pill.cur{background:var(--bg3); color:var(--text2);}

/* deal size gauge */
@media (max-width: 1200px){ .ov-split{grid-template-columns:1fr;} }
.og-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); font-weight:500;}
.og-bar{display:flex; align-items:center; gap:10px; margin-top:10px;}
.og-now{font-size:14px; font-weight:500; color:var(--text);}
/* The track is neutral; only the filled portion carries the brand */
.og-pot{font-size:15px; font-weight:500; color:var(--m3-on-surface-variant);}
.og-line{flex:1; height:6px; border-radius:100px; background:var(--m3-surface-3); position:relative; min-width:60px;}
.og-fill{position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--m3-primary);}
.og-sub{font-size:10px; color:var(--text3); margin-top:7px; text-align:center;}

/* keyword pills inside build bullets */
.kw-pill{display:inline-block; background:var(--blue-bg); color:var(--blue); font-weight:500; border-radius:100px; padding:1px 9px; font-size:12px; line-height:1.5;}


/* task grouping by call */
.tg-sub{font-weight:400; text-transform:none; letter-spacing:0; color:var(--text3); font-size:11.5px; margin-left:10px;}
.cat-tag{display:inline-block; background:var(--bg3); color:var(--text2); font-size:10.5px; font-weight:500; border-radius:100px; padding:2px 9px; margin-left:8px; vertical-align:middle;}

/* phase segment above tabs */
.phase-seg .seg-btn{display:inline-flex; align-items:center; gap:7px; padding:7px 20px;}

/* landing card processing indicator */

/* pie progress loader */
.pie{display:inline-block; width:13px; height:13px; border-radius:50%; margin-right:6px; vertical-align:-2px;
  background:conic-gradient(var(--blue) calc(var(--p, 10) * 1%), var(--blue-bg) 0);}
.proj-card .stat span{display:inline-flex; align-items:center;}

/* drive suggestion banner */
.drive-banner{border:1px solid var(--blue); background:var(--blue-bg); border-radius:14px; padding:14px 18px; margin-bottom:16px;}
.db-head{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500;}
.db-head .msi{color:var(--blue); font-size:19px;}
.db-list{display:flex; flex-direction:column; gap:6px; margin:12px 0;}
.db-item{display:flex; align-items:center; gap:10px; font-size:13px; background:var(--m3-surface); border:1px solid var(--border); border-radius:9px; padding:8px 12px; cursor:pointer;}
.db-item input{width:16px; height:16px; accent-color:var(--blue);}
.db-actions{display:flex; justify-content:flex-end; gap:10px;}


/* profile modal layout */
.pf-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pf-stack{display:block;}
.pf-grid .mfield{margin-bottom:12px;}
.pf-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
.pf-sec .cost-hr{margin:16px 0;}

.exec-intro .ei-body{font-size:13.5px; line-height:1.6; margin:10px 0 14px; color:var(--text2);}

/* org team table */
.tm-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.tm-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text3); font-weight:500; padding:6px 8px; border-bottom:1px solid var(--border);}
.tm-table td{padding:7px 8px; border-bottom:1px solid var(--bg3); vertical-align:middle;}
.tm-in{border:1px solid var(--border); border-radius:7px; padding:5px 8px; font-size:12px; width:100%; outline:none;}
.tm-in:focus{border-color:var(--blue);}
.tm-rate{max-width:80px;}
.tm-proj{color:var(--text3); font-size:11.5px;}

/* profile: vertical settings nav */
/* Fixed height, not min-height: the card is centred, so a section that is a
   different length used to resize the card and move the whole dialog under the
   cursor. Every section now gets the same box and scrolls inside it. */
.pf-shell{display:grid; grid-template-columns:210px 1fr; gap:0; border-top:1px solid var(--border); height:min(560px, calc(90vh - 96px));}
.pf-nav{display:flex; flex-direction:column; gap:2px; padding:14px 12px; border-right:1px solid var(--border); background:var(--bg2);}
.pf-navitem{display:flex; align-items:center; gap:10px; border:none; background:transparent; text-align:left; font-size:13px; color:var(--text2); padding:9px 12px; border-radius:9px; cursor:pointer;}
.pf-navitem .msi{font-size:18px;}
.pf-navitem:hover{background:var(--bg3); color:var(--text);}
.pf-navitem.active{background:var(--blue-bg); color:var(--blue); font-weight:500;}
/* min-height:0 so this grid item can actually scroll instead of stretching */
/* stable gutter so the fields do not shift sideways when a scrollbar appears */
.pf-shell .pmodal-body{padding:20px 26px; min-height:0; overflow-y:auto; scrollbar-gutter:stable;}
.pf-nav{min-height:0; overflow-y:auto;}

/* ============ MATERIAL 3 COMPONENT PASS ============ */
/* Buttons */
.btn-filled{background:var(--m3-primary); color:var(--m3-on-primary); border-radius:100px; padding:10px 24px; font-family:'Google Sans',Roboto,sans-serif; font-weight:500; font-size:14px; letter-spacing:.007em; border:none; transition:box-shadow .2s, background .2s;}
.btn-filled:hover{background:var(--blue-dark); box-shadow:0 1px 3px 1px rgba(0,0,0,.15);}
.btn-filled:active{background:#06377f;}
.btn-filled:disabled{background:rgba(31,31,31,.12); color:rgba(31,31,31,.38);}
.btn-flat{color:var(--m3-primary); border-radius:100px; padding:10px 16px; font-family:'Google Sans',Roboto,sans-serif; font-weight:500;}
.btn-flat:hover{background:var(--brand-state-hover);}
.paste-btn, .gbtn{border-radius:100px; border:1px solid var(--m3-outline); font-family:'Google Sans',Roboto,sans-serif; font-weight:500; padding:9px 20px; transition:background .2s;}
.paste-btn:hover{background:var(--brand-state-hover); box-shadow:none;}
.cp-stub, .task-ask, .tl-tobase{border-radius:100px; border:1px solid var(--m3-outline-variant); font-family:'Google Sans',Roboto,sans-serif;}

/* Fields */
.mfield{border:1px solid var(--m3-outline); border-radius:8px; padding:13px 16px; font-size:14px; background:var(--m3-surface); transition:border-color .15s, box-shadow .15s;}
.mfield:focus{border-color:var(--m3-primary); box-shadow:inset 0 0 0 1px var(--m3-primary);}
.field-label{font-size:12px; font-weight:500; color:var(--m3-on-surface-variant); letter-spacing:.033em;}

/* Chips */
.call-chip, .ov-pill, .opp-kind, .cat-tag, .task-owner, .count-badge, .bl-src, .kw-pill{
  border-radius:8px; font-family:'Google Sans Text',Roboto,sans-serif; letter-spacing:.02em;}
.rate-chip, .sync-chip{border-radius:8px; font-family:'Google Sans',Roboto,sans-serif; padding:7px 14px;}

/* Cards & surfaces (M3 elevation) */
.proj-card, .bento-card, .pain-card, .tl-card, .ps-main, .ps-side, .ov-hero, .task-row, .q-row, .story-row, .bl-row, .call-row{
  border-color:var(--m3-outline-variant); border-radius:12px;}
.proj-card:hover, .pain-card:hover, .tl-card:hover{box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);}
.pmodal-card{border-radius:28px; box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);}
.pmodal{background:rgba(0,0,0,.32);}

/* Tabs (M3 primary tabs) */
.ptab{font-family:'Google Sans',Roboto,sans-serif; font-weight:500; letter-spacing:.007em; border-radius:0;}
.ptab.active::after{height:3px; border-radius:3px 3px 0 0; background:var(--m3-primary);}
.ptab:hover{background:var(--brand-state-hover);}

/* Segmented buttons */
.cd-seg{border:1px solid var(--m3-outline); border-radius:100px; overflow:hidden;}
.seg-btn{font-family:'Google Sans',Roboto,sans-serif; font-weight:500; padding:9px 22px; border-right:1px solid var(--m3-outline-variant);}
.seg-btn:last-child{border-right:none;}
.seg-btn.active{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}

/* Topbar & nav */
.topbar{background:var(--m3-surface); border-bottom-color:var(--m3-outline-variant);}
/* The brand name only. The refresh button lives in here too and its icon must
   keep the symbol font, or it reads as the word "refresh". */
.tb-brand > span:not(.flag-icon){font-family:'Google Sans',Roboto,sans-serif; font-size:22px; color:var(--m3-on-surface-variant);}
.pf-navitem{font-family:'Google Sans Text',Roboto,sans-serif; border-radius:100px;}
.pf-navitem.active{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.pf-nav{background:var(--m3-surface); border-right-color:var(--m3-outline-variant);}

/* Snackbar (M3) */
.snackbar{background:#322f35; color:#f5eff7; border-radius:4px; font-family:'Google Sans Text',Roboto,sans-serif; box-shadow:0 4px 8px 3px rgba(0,0,0,.15);}

/* client orgs in settings */
.cl-org{border:1px solid var(--m3-outline-variant); border-radius:12px; padding:14px 16px; margin-bottom:14px;}
.cl-orghead{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.cl-orghead .msi{color:var(--m3-primary);}
.cl-orghead .t{font-family:'Google Sans',Roboto,sans-serif; font-size:14px; font-weight:500;}
.cl-orghead .s{font-size:11.5px; color:var(--text3);}
.cl-orghead .count-badge{margin-left:auto;}

/* ============ SQUIRCLE RADII + LIGHTER STROKES ============ */
:root{
  --m3-outline-variant:#dde3ea; --m3-outline:#c8ccd0; --border:#dde3ea;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
}
/* Cards, panes, surfaces */
.proj-card, .new-proj-card, .bento-card, .pain-card, .tl-card, .ps-main, .ps-side, .ov-hero, .ov-gauge,
.task-row, .q-row, .story-row, .bl-row, .call-row, .sl-sec, .cd-sec, .cl-org, .drive-banner, .wiz-panel,
.tgroup-head, .team-panel, .side-sheet, .compose, .src-peek, .pain-widget, .signin-card, .sk-box, .db-item{
  border-radius:var(--r-md);
}
.pmodal-card{border-radius:var(--r-xl);}
.mfield, .tm-in, .gm-search, .rate-pop{border-radius:var(--r-sm);}
textarea.mfield{border-radius:var(--r-md);}
/* Pills stay fully round */
.btn-filled, .btn-flat, .paste-btn, .gbtn, .cp-stub, .task-ask, .cd-seg, .rate-chip, .sync-chip,
.call-chip, .ov-pill, .opp-kind, .cat-tag, .task-owner, .count-badge, .bl-src, .kw-pill, .pf-navitem,
.tl-tobase, .sel-ask, .cp-inputrow, .tl-open{border-radius:100px;}
/* Lighter strokes everywhere */
.proj-card, .bento-card, .pain-card, .tl-card, .ps-main, .ps-side, .ov-hero, .ov-gauge, .task-row, .q-row,
.story-row, .bl-row, .call-row, .cl-org, .wiz-panel, .team-panel, .src-peek, .pain-widget, .mfield, .tm-in,
.cd-seg, .gm-search, .paste-btn, .gbtn, .sk-box, .db-item, .cp-inputrow{border-color:var(--m3-outline-variant);}
.seg-btn{border-right-color:var(--m3-outline-variant);}
.topbar, .ptabs, .tp-add, .cd-side, .cd-content, .col-head{border-color:var(--m3-outline-variant);}

/* clip dialog children to the card radius so no square corners show */
.pmodal-card{overflow:hidden;}
.pf-shell{border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); overflow:hidden;}
.pf-nav{border-bottom-left-radius:var(--r-xl);}
.call-card{overflow:hidden;}
.cd-content, .cd-side{border-bottom-right-radius:var(--r-xl);}

/* phase switch and tabs share one row */
.tabrow{position:relative; display:flex; flex-direction:row; align-items:center; gap:16px; margin-bottom:20px; border-bottom:1px solid var(--m3-outline-variant);}
.tabrow .ptabs{flex:0 1 auto; order:1; border-bottom:none; margin-bottom:-1px; min-width:0; overflow-x:auto; scrollbar-width:none;}
.tabrow .ptabs::-webkit-scrollbar{display:none;}
.tabrow .ptab{padding:12px 14px; white-space:nowrap;}

.tabhead h2{font-size:20px; line-height:1.2;}

/* compact vertical rhythm */
.tabrow{gap:14px; margin-bottom:12px;}
.tabhead{margin-bottom:10px;}
.tabhead h2{font-size:18px;}
.ptab{padding:9px 14px;}
.ps-main{padding:16px 22px;}
.main{padding:18px 28px;}

.paste-btn{padding:7px 16px;}

/* transcript reading view */
.tx{max-width:860px; margin:0 auto; font-size:14px; line-height:1.65;}
.tx-turn{display:flex; gap:12px; margin:14px 0; align-items:flex-start;}
.tx-turn.mine{flex-direction:row-reverse;}
.tx-av{width:30px; height:30px; border-radius:50%; color:#fff; font-size:11px; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Google Sans',Roboto,sans-serif;}
.tx-bubble{background:var(--m3-surface-2); border-radius:16px; padding:10px 14px; max-width:76%;}
.tx-turn.mine .tx-bubble{background:var(--m3-primary-container);}
.tx-meta{display:flex; gap:8px; align-items:baseline; font-size:11.5px; color:var(--text2); margin-bottom:3px;}
.tx-meta b{font-family:'Google Sans',Roboto,sans-serif; font-weight:500; color:var(--text);}
.tx-text{color:var(--text);}
.tx-h{font-family:'Google Sans',Roboto,sans-serif; font-size:15px; font-weight:500; margin:22px 0 6px; color:var(--text);}
.tx-p{margin:8px 0; color:var(--text2);}
.tx-li{display:flex; gap:10px; margin:5px 0; color:var(--text2);}
.tx-li span{width:5px; height:5px; border-radius:50%; background:var(--m3-primary); margin-top:9px; flex-shrink:0;}

/* team row delete on hover */
.tm-table tr .tm-act{width:36px; text-align:right;}
.tm-table tr .tm-act .tp-del{display:none;}
.tm-table tr:hover .tm-act .tp-del{display:inline-flex;}
.tm-table tr:hover{background:var(--m3-surface-1);}

/* pinned call context in co-pilot */
.cp-pin{display:flex; align-items:center; gap:8px; background:var(--m3-primary-container); color:var(--m3-on-primary-container); border-radius:100px; padding:7px 8px 7px 14px; font-size:12px; margin-bottom:10px;}
.cp-pin .msi{font-size:15px;}
.cpp-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cp-pin button{border:none; background:transparent; color:inherit; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.cp-pin button:hover{background:rgba(0,0,0,.08);}

.pf-navspacer{flex:1;}
.pf-signout{color:var(--red);}
.pf-signout:hover{background:var(--red-bg); color:var(--red);}

.tm-name{font-family:'Google Sans',Roboto,sans-serif; font-weight:500; border-color:transparent; background:transparent;}
.tm-table tr:hover .tm-name, .tm-name:focus{border-color:var(--m3-outline-variant); background:var(--m3-surface);}

/* merge picker */
.merge-pop{position:fixed; z-index:700; width:280px; background:var(--m3-surface); border:1px solid var(--m3-outline-variant); border-radius:16px; box-shadow:0 4px 8px 3px rgba(0,0,0,.15); padding:12px;}
.mp-head{font-size:12px; color:var(--text2); margin-bottom:8px;}
.mp-search{margin-bottom:8px; padding:8px 12px; font-size:12.5px;}
.mp-list{max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}
.mp-item{display:flex; align-items:center; justify-content:space-between; gap:8px; border:none; background:transparent; text-align:left; font-size:13px; padding:8px 10px; border-radius:10px; cursor:pointer;}
.mp-item:hover{background:var(--m3-surface-2);}
.mp-item span{font-size:11px; color:var(--text3);}
.tm-act{white-space:nowrap;}

/* ============ MATERIAL 3 COMPONENT LAYER ============
   Google's own metrics: 40px buttons at full radius, outlined text fields
   with a floating label notching the 1px outline (2px + primary on focus),
   assist/filter chips at 32px, and the M3 type scale for headline/body. */
.m3-headline{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:28px; line-height:36px; font-weight:400; letter-spacing:0; color:var(--m3-on-surface);}
.m3-body{font-size:14px; line-height:20px; letter-spacing:.017em; color:var(--m3-on-surface-variant);}

.m3-btn{height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 24px; border:none; border-radius:20px; font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:14px; font-weight:500; letter-spacing:.007em; transition:box-shadow .15s, background-color .15s;}
.m3-btn.filled{background:var(--m3-primary); color:var(--m3-on-primary);}
.m3-btn.filled:hover{background:var(--blue-dark); box-shadow:var(--e1);}
.m3-btn.filled:disabled{background:rgba(31,31,31,.12); color:rgba(31,31,31,.38); box-shadow:none; cursor:default;}
.m3-btn.tonal{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.m3-btn.tonal:hover{background:var(--m3-primary-container); filter:brightness(.96);}
.m3-btn.outlined{background:transparent; color:var(--m3-primary); border:1px solid var(--m3-outline-variant);}
.m3-btn.text{background:transparent; color:var(--m3-primary); padding:0 12px;}
.m3-btn.text:hover, .m3-btn.outlined:hover{background:var(--brand-state-hover);}

.m3-field{position:relative; display:block; margin-bottom:20px;}
.m3-input{width:100%; height:56px; border:1px solid var(--m3-outline); border-radius:8px; background:transparent; padding:16px; font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:16px; line-height:24px; letter-spacing:.031em; color:var(--m3-on-surface); outline:none; transition:border-color .12s, border-width .12s;}
.m3-field.is-area .m3-input{height:auto; min-height:112px; resize:vertical;}
.m3-input:hover{border-color:var(--m3-on-surface);}
.m3-input:focus{border:2px solid var(--m3-primary); padding:15px;}
.m3-lbl{position:absolute; left:12px; top:16px; padding:0 4px; background:var(--m3-surface); font-size:16px; line-height:24px; color:var(--m3-on-surface-variant); pointer-events:none; transition:top .12s, font-size .12s, color .12s;}
.m3-input:focus ~ .m3-lbl, .m3-input:not(:placeholder-shown) ~ .m3-lbl, .m3-input:-webkit-autofill ~ .m3-lbl, .m3-field.is-select .m3-lbl{top:-8px; font-size:12px; line-height:16px;}
/* Chrome paints autofilled fields blue and hides the value from :placeholder-shown */
.m3-input:-webkit-autofill{-webkit-text-fill-color:var(--m3-on-surface); -webkit-box-shadow:0 0 0 1000px var(--m3-surface) inset; box-shadow:0 0 0 1000px var(--m3-surface) inset;}
.m3-input:focus ~ .m3-lbl{color:var(--m3-primary);}
.m3-field.is-select .m3-input{appearance:none; padding-right:44px;}
.m3-trail{position:absolute; right:12px; top:18px; color:var(--m3-on-surface-variant); pointer-events:none; font-size:22px;}
.m3-group-lbl{font-size:12px; font-weight:500; letter-spacing:.033em; color:var(--m3-on-surface-variant); margin:2px 0 10px;}
.m3-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.m3-chip{height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 16px; border:1px solid var(--m3-outline-variant); border-radius:8px; background:transparent; font-size:14px; font-weight:500; letter-spacing:.007em; color:var(--m3-on-surface-variant); transition:background-color .12s;}
.m3-chip:hover{background:rgba(31,31,31,.06);}
.m3-chip.sel{background:var(--m3-primary-container); border-color:transparent; color:var(--m3-on-primary-container); padding-left:10px;}
.m3-chip .msi{font-size:18px; display:none;}
.m3-chip.sel .msi{display:block;}
.m3-select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text2) 50%),linear-gradient(135deg,var(--text2) 50%,transparent 50%); background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px;}

/* ============ ORG ONBOARDING ============ */
#view-onboard{display:none; min-height:100vh; align-items:center; justify-content:center; background:var(--m3-surface-1); padding:40px 24px;}
#view-onboard.show{display:flex;}
.ob-card{width:100%; max-width:560px; background:var(--m3-surface); border-radius:28px; box-shadow:var(--e2); overflow:hidden;}
.ob-progress{height:4px; background:var(--m3-surface-3);}
.ob-progress span{display:block; height:100%; width:50%; background:var(--m3-primary); border-radius:0 2px 2px 0; transition:width .25s cubic-bezier(.2,0,0,1);}
.ob-body{padding:40px;}
.ob-brand{justify-content:flex-start; margin-bottom:28px;}
.ob-brand span:last-child{font-size:20px; color:var(--m3-on-surface-variant); font-weight:400;}
.ob-card .m3-headline{margin-bottom:8px;}
.ob-card .m3-body{margin-bottom:32px;}
.ob-actions{display:flex; align-items:center; gap:8px; margin-top:32px;}
.ob-step:not(.hidden) ~ .ob-step{display:none;}
.ob-step[data-obstep="1"] .ob-actions{justify-content:flex-end;}
.ob-err{font-size:12px; color:var(--red); min-height:16px;}
.pf-stack .mfield{margin-bottom:18px;}

/* ============ DATA TABLE (M3 / Google) ============ */
.cost-table{width:100%; border-collapse:collapse; font-size:13px;}
.cost-table th{text-align:left; font-size:12px; font-weight:500; letter-spacing:.033em; color:var(--m3-on-surface-variant); padding:0 12px 10px; border-bottom:1px solid var(--m3-outline-variant);}
.cost-table td{padding:12px; border-bottom:1px solid var(--m3-surface-3); color:var(--m3-on-surface);}
.cost-table tbody tr:hover{background:var(--m3-surface-1);}
.cost-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.cost-table tr.muted td{color:var(--text3);}
.cost-table td.empty{color:var(--text3); text-align:center; padding:24px 12px;}
.cost-table tfoot td{border-bottom:none; border-top:1px solid var(--m3-outline-variant); font-weight:500; padding-top:14px;}
.cost-table tfoot tr:last-child td{padding-top:2px; border-top:none; color:var(--green);}

/* ============ SKELETON LOADERS ============ */
@keyframes skshimmer{0%{background-position:-320px 0;}100%{background-position:320px 0;}}
.sk{background:linear-gradient(90deg,var(--m3-surface-2) 25%,var(--m3-surface-3) 37%,var(--m3-surface-2) 63%); background-size:640px 100%; animation:skshimmer 1.3s ease-in-out infinite; border-radius:8px; display:block;}
.sk-line{height:12px; margin-bottom:10px;}
.sk-line.w40{width:40%;} .sk-line.w60{width:60%;} .sk-line.w80{width:80%;} .sk-line.w25{width:25%;}
.sk-title{height:16px; width:45%; margin-bottom:14px; border-radius:8px;}
.sk-card{border:1px solid var(--m3-outline-variant); border-radius:12px; padding:18px; margin-bottom:12px;}
.sk-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
.sk-chip{height:28px; width:96px; border-radius:100px;}
.sk-row{display:flex; align-items:center; gap:12px; padding:12px 0;}
.sk-avatar{width:36px; height:36px; border-radius:50%; flex-shrink:0;}

/* ============ EMPTY STATES ============ */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 24px; color:var(--m3-on-surface-variant);}
.empty-state .es-icon{width:56px; height:56px; border-radius:16px; background:var(--m3-surface-2); color:var(--m3-primary); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.empty-state .es-icon .msi{font-size:28px;}
.empty-state h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:16px; font-weight:500; color:var(--m3-on-surface); margin-bottom:6px;}
.empty-state p{font-size:13.5px; line-height:1.55; max-width:420px; margin-bottom:14px;}
.empty-state .es-when{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--m3-on-primary-container); background:var(--m3-primary-container); padding:6px 12px; border-radius:100px;}
.empty-state .es-when .msi{font-size:15px;}
.empty-state.compact{padding:32px 20px;}
.empty-state.compact .es-icon{width:44px; height:44px; border-radius:14px; margin-bottom:12px;}
.empty-state.compact .es-icon .msi{font-size:22px;}

/* ============ BRAND COLOUR PICKER ============ */
.brand-picker{display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.brand-swatches{display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:396px;}
/* The presets box carries no layout of its own, so its buttons sit in the row
   above as though they were direct children of it */
#pfSwatches{display:contents;}
.brand-sw{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;}
.brand-sw.sel{border-color:var(--m3-on-surface); box-shadow:0 0 0 2px var(--m3-surface) inset;}

/* Anything not on the palette. A ring of the whole spectrum with a plus in it,
   the same size as every preset, sitting at the end of the row. */
.brand-custom{position:relative; width:28px; height:28px; flex-shrink:0; border-radius:50%; cursor:pointer;
  border:2px solid transparent; background-clip:padding-box;
  background-image:conic-gradient(#f44336,#ff9800,#ffeb3b,#4caf50,#00bcd4,#2196f3,#673ab7,#e91e63,#f44336);
  display:inline-grid; place-items:center;}
.brand-custom::before{content:''; position:absolute; inset:5px; border-radius:50%; background:var(--m3-surface);}
.brand-custom .msi{position:relative; font-size:15px; color:var(--m3-on-surface);}
.brand-custom input[type=color]{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; cursor:pointer;}
.brand-custom.sel{border-color:var(--m3-on-surface);}
.brand-hex{font-size:12.5px; color:var(--text2); font-variant-numeric:tabular-nums;}
.brand-hint{font-size:11.5px; color:var(--text3); margin-bottom:18px;}

/* ============ CONVERSATION STATS (overview) ============ */
.cv-stat b.vibe.warm, .cv-stat b.vibe.good{color:var(--green);}
.cv-stat b.vibe.mid{color:var(--text2);}
.cv-stat b.vibe.cool{color:var(--amber);}
.cv-stat b.vibe.tense{color:var(--red);}
.cv-bar{display:block; height:6px; border-radius:100px; background:var(--m3-surface-3); overflow:hidden;}
.cv-bar.sm{width:100%; min-width:60px;}
.cv-fill{display:block; height:100%; border-radius:100px; background:var(--text3);}
.cv-fill.warm, .cv-fill.good{background:var(--green);}
.cv-fill.mid{background:var(--m3-primary);}
.cv-fill.cool{background:var(--amber);}
.cv-fill.tense{background:var(--red);}
.cv-vibe.warm, .cv-vibe.good{color:var(--green);}
.cv-vibe.mid{color:var(--text2);}
.cv-vibe.cool{color:var(--amber);}
.cv-vibe.tense{color:var(--red);}
.cv-table .num{text-align:right; font-variant-numeric:tabular-nums;}
.cv-side.client{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}

/* One strip of numbers under the client summary */
.ov-big{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:26px; font-weight:400; line-height:1.15; color:var(--m3-on-surface); display:flex; align-items:baseline; gap:8px; margin:2px 0 4px;}
.ov-big-sub{font-size:12px; color:var(--text3);}
.ov-big.vibe.warm, .ov-big.vibe.good{color:var(--green);}
.ov-big.vibe.mid{color:var(--text2);}
.ov-big.vibe.cool{color:var(--amber);}
.ov-big.vibe.tense{color:var(--red);}
.ov-cell .cv-bar{margin-top:8px;}
@media (max-width:900px){ .ov-cell{border-left:none; border-top:1px solid var(--m3-outline-variant);} .ov-cell:first-child{border-top:none;} }

/* Stat cards above the conversation detail */
.sc-lbl .msi{font-size:16px;}
.sc-val.vibe.warm, .sc-val.vibe.good{color:var(--green);}
.sc-val.vibe.mid{color:var(--text2);}
.sc-val.vibe.cool{color:var(--amber);}
.sc-val.vibe.tense{color:var(--red);}
.stat-card .cv-bar{margin-top:12px;}

/* ============ OVERVIEW BENTO ============ */
.ov-bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.ov-card{border:1px solid var(--m3-outline-variant); border-radius:16px; padding:20px 22px; background:var(--m3-surface); min-width:0;}
.ov-card.span2{grid-column:span 2;}
.ov-card.span4{grid-column:1 / -1;}
.ov-card.gaugecard{display:flex; flex-direction:column; justify-content:center; padding:14px 24px;}
.ov-card.gaugecard .og-bar{margin-top:2px;}
.ov-card .bento-head{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.ov-card .bento-head .bt{font-size:11.5px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--text3);}
.ov-card .bento-head .msi{font-size:18px; color:var(--m3-primary);}
.ov-card.statcell{display:flex; flex-direction:column; justify-content:center;}
.ov-card .og-sub, .ov-card .og-lbl{text-align:left;}
.ov-card.statcell .cv-bar{margin-top:10px;}

@media (max-width:1400px){ .ov-bento{grid-template-columns:repeat(2,minmax(0,1fr));} .ov-card.span4{grid-column:1 / -1;} }
@media (max-width:760px){ .ov-bento{grid-template-columns:1fr;} .ov-card.span2, .ov-card.span4{grid-column:1 / -1;} }



/* =====================================================================
   GOOGLE DESIGN SYSTEM PASS
   Material 3 as Google ships it: the tonal palette, the type scale in
   Google Sans / Google Sans Text, the shape scale, state layers, and the
   4px spacing grid, applied to every component in this app.
   ===================================================================== */
:root{
  /* Tonal palette (Google Blue baseline) */
  --m3-primary:#0b57d0; --m3-on-primary:#fff;
  --m3-primary-container:#d3e3fd; --m3-on-primary-container:#041e49;
  --m3-secondary-container:#c2e7ff; --m3-on-secondary-container:#001d35;
  --m3-surface:#fff;
  --m3-surface-1:#f8fafd; --m3-surface-2:#f0f4f9; --m3-surface-3:#e9eef6; --m3-surface-4:#dde3ea;
  --m3-outline:#747775; --m3-outline-variant:#c4c7c5;
  --m3-on-surface:#1f1f1f; --m3-on-surface-variant:#444746;
  --m3-inverse-surface:#303030; --m3-inverse-on-surface:#f2f2f2;
  --m3-error:#b3261e; --m3-error-container:#f9dedc;
  --blue:#0b57d0; --blue-dark:#0842a0; --blue-bg:#d3e3fd;
  --green:#146c2e; --green-bg:#c4eed0;
  --amber:#a8710a; --amber-bg:#ffdf99;
  --red:#b3261e; --red-bg:#f9dedc;
  --text:#1f1f1f; --text2:#444746; --text3:#747775;
  --border:#c4c7c5; --bg2:#f8fafd; --bg3:#e9eef6;

  /* Shape scale */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:100px;

  /* Brand-derived: applyBrand() in app.js recomputes these from the picked colour */
  --brand-avatar:#0b57d0;
  --brand-solid:#0b57d0; --brand-on-solid:#fff;
  --brand-state-hover:rgba(11,87,208,.08);

  /* State layer opacities */
  --state-hover:.08; --state-focus:.12; --state-press:.12;

  /* Elevation (Google's shadow recipe) */
  --e1:0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  --e3:0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
}

/* ---------- Type scale ---------- */
body{font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:14px; line-height:20px; letter-spacing:.0142857em; color:var(--m3-on-surface);}
h1,h2,h3,h4,.ov-name,.tl-title,.pc-title,.cp-title,.tp-head,.sheet-head,.pmodal-head,.compose-head{font-family:'Google Sans','Roboto',Arial,sans-serif; font-weight:400; letter-spacing:0;}
h2, .board-head h2, .tabhead h2, #view-projects h2{font-size:22px; line-height:28px;}
h4, .proj-card h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:16px; line-height:24px; font-weight:500; letter-spacing:.0093em;}
.field-label, .og-lbl, .sc-lbl, .ov-plabel, .cd-lbl, .sheet-lbl, .cpp-label, .task-sec-lbl, .col-head{
  font-size:11px; line-height:16px; font-weight:500; letter-spacing:.0454em; text-transform:uppercase; color:var(--m3-on-surface-variant);}
.og-sub, .cv-note, .cost-note, .signin-foot, .brand-hint, .engine-note, .tg-sub, .bl-src, .pw-sub{
  font-size:12px; line-height:16px; letter-spacing:.0333em; color:var(--text3);}

/* ---------- Buttons: 40px, full radius, label-large ---------- */
.btn-filled, .paste-btn, .send-btn, .compose-send, .cp-send, .tmAdd, #tmAdd{
  height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-full); font-family:'Google Sans Text','Roboto',Arial,sans-serif;
  font-size:14px; line-height:20px; font-weight:500; letter-spacing:.0071em; padding:0 24px; border:none;
  transition:background-color .15s, box-shadow .15s, border-color .15s;}
.btn-filled{background:var(--m3-primary); color:var(--m3-on-primary);}
.btn-filled:hover{background:var(--blue-dark); box-shadow:var(--e1);}
.btn-filled:active{box-shadow:none;}
.btn-filled:disabled{background:rgba(31,31,31,.12); color:rgba(31,31,31,.38); box-shadow:none; cursor:default;}
.paste-btn{background:var(--m3-surface); color:var(--m3-primary); border:1px solid var(--m3-outline-variant); padding:0 16px;}
.paste-btn:hover{background:var(--brand-state-hover); border-color:var(--m3-outline-variant);}
.paste-btn:disabled{color:rgba(31,31,31,.38); border-color:rgba(31,31,31,.12); background:transparent; cursor:default;}
.btn-flat, .pf-signout{height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; border-radius:var(--r-full); background:transparent; border:none; font-size:14px; font-weight:500; letter-spacing:.0071em; color:var(--m3-primary);}
.btn-flat:hover{background:var(--brand-state-hover);}
.cp-send{width:40px; height:40px; padding:0; border-radius:50%;}

/* ---------- Icon buttons: 40px target, circular state layer ---------- */
.tb-back, .proj-del, .tp-del, .sheet-close, .task-src-btn, .mtg-icon-btn, .tp-edit-btn, .cp-min{
  width:40px; height:40px; border-radius:50%; border:none; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:var(--m3-on-surface-variant);
  transition:background-color .15s;}
.tb-back:hover, .sheet-close:hover, .task-src-btn:hover, .mtg-icon-btn:hover, .tp-edit-btn:hover, .cp-min:hover{background:rgba(31,31,31,.08); color:var(--m3-on-surface);}
.proj-del:hover, .tp-del:hover{background:var(--m3-error-container); color:var(--m3-error);}

/* ---------- Chips: 32px, 8px radius, label-large ---------- */
.rate-chip, .sync-chip, .call-chip, .cp-chip, .cp-stub, .ov-pill, .cat-tag, .opp-kind, .kw-pill, .tl-lbl{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px;
  border-radius:var(--r-sm); font-size:13px; line-height:20px; font-weight:500; letter-spacing:.0071em;
  border:1px solid transparent; transition:background-color .15s;}
.rate-chip, .sync-chip{height:32px;}
.cp-chip, .cp-stub, .call-chip{background:var(--m3-surface); border-color:var(--m3-outline-variant); color:var(--m3-on-surface-variant);}
.cp-chip:hover, .cp-stub:hover, .call-chip:hover{background:rgba(31,31,31,.06);}
.ov-pill{background:var(--m3-surface-2); color:var(--m3-on-surface-variant); height:28px; font-size:12.5px;}
.ov-pill.in{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.count-badge, .ptab-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-full); background:var(--m3-surface-3); color:var(--m3-on-surface-variant); font-size:11px; line-height:16px; font-weight:500; letter-spacing:.0454em;}

/* ---------- Segmented button ---------- */
.cd-seg, .phase-seg, .tlp-seg{display:inline-flex; height:36px; border:1px solid var(--m3-outline-variant); border-radius:var(--r-full); overflow:hidden; background:var(--m3-surface);}
.cd-seg .seg-btn, .phase-seg .seg-btn, .tlp-seg .seg-btn{
  display:inline-flex; align-items:center; gap:8px; height:100%; padding:0 16px; border:none; background:transparent;
  font-size:13px; font-weight:500; letter-spacing:.0071em; color:var(--m3-on-surface-variant); border-radius:0;
  transition:background-color .15s, color .15s;}
.cd-seg .seg-btn + .seg-btn, .phase-seg .seg-btn + .seg-btn, .tlp-seg .seg-btn + .seg-btn{border-left:1px solid var(--m3-outline-variant);}
.cd-seg .seg-btn:hover, .phase-seg .seg-btn:hover{background:rgba(31,31,31,.06);}
.cd-seg .seg-btn.active, .phase-seg .seg-btn.active, .tlp-seg .seg-btn.active{background:var(--m3-secondary-container); color:var(--m3-on-secondary-container);}
.cd-seg .seg-btn.active .msi, .phase-seg .seg-btn.active .msi{color:var(--m3-primary);}

/* ---------- Tabs: 48px, 3px rounded indicator ---------- */
/* The co-pilot takes half the window, so the bar has about 840px to work with.
   Tight enough that six tabs fit rather than the last one silently clipping. */
.ptab{position:relative; height:48px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border:none; background:transparent;
  font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:14px; font-weight:500; letter-spacing:.0071em; color:var(--m3-on-surface-variant);}
.ptab:hover{background:rgba(31,31,31,.04); color:var(--m3-on-surface);}
.ptab.active{color:var(--m3-primary);}
.ptab.active::after{content:""; position:absolute; left:6px; right:6px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--m3-primary);}
.ptab .msi{font-size:19px;}

/* ---------- Cards and surfaces ---------- */
.proj-card, .new-proj-card, .ov-card, .bento-card, .stat-card, .kcard, .pain-card, .tl-card, .sk-card, .call-card, .transcript-box, .since-widget, .pain-widget, .drive-banner, .exec-intro{
  border-radius:var(--r-md); border:1px solid var(--m3-outline-variant); background:var(--m3-surface);}
.proj-card{padding:16px 20px; transition:box-shadow .15s, background-color .15s;}
.proj-card:hover{box-shadow:var(--e1); background:var(--m3-surface-1);}
.ov-card, .bento-card{border-radius:var(--r-lg); padding:20px 24px;}
.ps-main, .ps-side{border-radius:var(--r-lg); border:1px solid var(--m3-outline-variant);}
.kcard{padding:16px; border-radius:var(--r-md);}

/* ---------- Lists and rows: 48px targets, neutral state layer ---------- */
.task-row, .call-row, .tp-row, .bl-row, .story-row, .q-row, .mp-item, .gs-item, .db-item, .sl-item{
  min-height:48px; border-radius:var(--r-sm); transition:background-color .12s;}
.task-row:hover, .call-row:hover, .tp-row:hover, .story-row:hover, .mp-item:hover, .gs-item:hover, .db-item:hover{background:var(--m3-surface-1);}

/* ---------- Text fields: outlined, 8px, 2px focus ---------- */
.mfield, .tm-in, .mp-search input, .gm-search{
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-sm); background:var(--m3-surface);
  font-size:14px; line-height:20px; letter-spacing:.0142857em; color:var(--m3-on-surface); transition:border-color .12s, box-shadow .12s;}
.mfield{padding:12px 16px;}
.mfield:hover, .tm-in:hover{border-color:var(--m3-on-surface);}
.mfield:focus, .tm-in:focus, .gm-search:focus-within{border-color:var(--m3-primary); box-shadow:inset 0 0 0 1px var(--m3-primary); outline:none;}
.mfield::placeholder{color:var(--text3);}
.mfield:disabled{background:var(--m3-surface-2); color:var(--m3-on-surface-variant); border-color:var(--m3-outline-variant);}

/* ---------- Dialogs: 28px radius, 24px padding, right-aligned text actions ---------- */
.pmodal-card, .merge-pop, .team-panel, .rate-pop, .tl-panel, .side-sheet, .src-peek{
  border-radius:var(--r-xl); background:var(--m3-surface); box-shadow:var(--e3); border:1px solid var(--m3-outline-variant);}
.pmodal-head{padding:24px 24px 16px; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:22px; line-height:28px; font-weight:400;}
.pmodal-body{padding:0 24px 8px;}
.pmodal-foot{padding:16px 24px 24px; display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.merge-pop, .team-panel, .rate-pop{border-radius:var(--r-md);}
.side-sheet{border-radius:var(--r-lg) 0 0 var(--r-lg);}

/* ---------- Data tables ---------- */
.cv-table th, .cost-table th, .tm-table th{height:40px; padding:0 16px; font-size:11px; line-height:16px; font-weight:500; letter-spacing:.0454em; text-transform:uppercase; color:var(--m3-on-surface-variant); border-bottom:1px solid var(--m3-outline-variant); text-align:left;}
.cv-table td, .cost-table td, .tm-table td{height:48px; padding:0 16px; font-size:13.5px; line-height:20px; border-bottom:1px solid var(--m3-surface-3); color:var(--m3-on-surface);}
.cv-table tbody tr:hover, .cost-table tbody tr:hover, .tm-table tbody tr:hover{background:var(--m3-surface-1);}

/* ---------- Snackbar ---------- */
.snackbar{background:var(--m3-inverse-surface); color:var(--m3-inverse-on-surface); border-radius:var(--r-xs); padding:14px 16px; font-size:14px; line-height:20px; letter-spacing:.0142857em; box-shadow:var(--e3);}

/* ---------- Dividers, focus, scrollbars ---------- */
hr, .cost-hr, .cd-line{border:none; border-top:1px solid var(--m3-outline-variant);}
:focus-visible{outline:2px solid var(--m3-primary); outline-offset:2px;}
/* Text fields already say they are focused by thickening their own border.
   The global ring drew a second line 2px outside that one, so every focused
   field wore two concentric outlines. One control, one focus mark. */
input[type="text"]:focus-visible, input[type="email"]:focus-visible,
input[type="password"]:focus-visible, input[type="search"]:focus-visible,
input[type="number"]:focus-visible, input[type="url"]:focus-visible,
input[type="tel"]:focus-visible, input:not([type]):focus-visible,
textarea:focus-visible, select:focus-visible,
.m3-input:focus-visible, .mfield:focus-visible, .tm-in:focus-visible{outline:none;}
/* No scrollbars anywhere. Everything that scrolls is a panel inside a window
   that does not, so the bars added noise on every edge without telling anyone
   anything they could not get from the content moving. Scrolling itself is
   untouched: wheel, trackpad and keyboard all work as before. */
*::-webkit-scrollbar{width:0; height:0; display:none;}
*{scrollbar-width:none;}

/* ---------- Avatars and facepile ---------- */
.avatar{width:32px; height:32px; font-size:14px; font-weight:500; letter-spacing:.0071em;}
.fp-av{width:28px; height:28px; font-size:11px; font-weight:500; border:2px solid var(--m3-surface);}

/* ---------- Spacing rhythm on the 4px grid ---------- */
.main{padding:24px 24px 32px;}
.ps-main{padding:20px 24px;}
.ps-side{padding:20px;}
.tabhead{margin-bottom:16px;}
.tabrow{margin-bottom:16px; gap:16px;}
.proj-grid{gap:16px;}
.ov-bento{gap:16px;}

/* Destructive row actions stay hidden until the row is hovered */
.proj-del, .tp-del{display:none;}
.proj-card:hover .proj-del, .tp-row:hover .tp-del, .story-row:hover .tp-del, .pain-card:hover .tp-del{display:inline-flex;}

/* Calls tab: timeline on the left, call insights stacked on the right */
.calls-aside .ov-card:not(.statcell){grid-column:1 / -1;}
.calls-aside .statcell{padding:14px 16px;}
.calls-aside .statcell .ov-big{font-size:22px;}
.calls-aside .statcell .og-sub{margin-top:2px;}
.calls-aside .ov-card{padding:16px 20px;}
@media (max-width:1180px){ .calls-split{grid-template-columns:1fr;} .calls-aside{position:static;} }

/* Every tag, chip, and badge is a pill */
.rate-chip, .sync-chip, .call-chip, .cp-chip, .cp-stub, .ov-pill, .cat-tag, .opp-kind, .opp-new,
.kw-pill, .tl-lbl, .cv-side, .count-badge, .ptab-badge, .m3-chip, .task-owner, .bfile, .tm-proj,
.sheet-highlight, .cd-ts, .call-chips > *, .tl-chips > *, .q-client, .q-ours, .engine-note,
.pf-navitem, .src-star, .cp-creep, .cp-pin, .db-item .msi + span, .brand-sw{
  border-radius:var(--r-full);}
.m3-chip.sel{padding-left:12px;}
.cat-tag, .cv-side, .count-badge, .ptab-badge, .opp-new, .kw-pill{padding-left:10px; padding-right:10px;}

/* ============ ACCOUNT MENU (Google account popover) ============ */
.acct-wrap{position:relative; display:flex; align-items:center;}
.acct-wrap .avatar{cursor:pointer;}
.acct-pop{display:none; position:absolute; top:44px; right:0; z-index:60; width:320px; padding:16px 0 12px;
  background:var(--m3-surface); border:1px solid var(--m3-outline-variant); border-radius:var(--r-xl); box-shadow:var(--e3);}
.acct-pop.show{display:block;}
.acct-head{display:flex; align-items:center; gap:12px; padding:0 20px 14px; border-bottom:1px solid var(--m3-outline-variant);}
.acct-av{width:44px; height:44px; border-radius:50%; background:var(--brand-solid); color:var(--brand-on-solid); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:500; overflow:hidden; flex-shrink:0;}
.acct-av img{width:100%; height:100%; object-fit:cover;}
.acct-id{min-width:0;}
.acct-name{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; line-height:20px; color:var(--m3-on-surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acct-mail{font-size:12.5px; line-height:18px; color:var(--m3-on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acct-menu{padding:8px 8px 4px;}
.acct-item{display:flex; align-items:center; gap:14px; width:100%; height:44px; padding:0 14px; border:none; background:transparent;
  border-radius:var(--r-full); font-size:14px; letter-spacing:.0142857em; color:var(--m3-on-surface); text-align:left; transition:background-color .12s;}
.acct-item:hover{background:var(--m3-surface-2);}
.acct-item .msi{font-size:20px; color:var(--m3-on-surface-variant);}
.acct-foot{display:flex; justify-content:center; padding:10px 20px 4px; border-top:1px solid var(--m3-outline-variant); margin-top:6px;}
.acct-foot .m3-btn{height:36px;}

/* Facepile and speaker avatars use soft container tones, not saturated fills */
.fp-av{box-shadow:none; border:2px solid var(--m3-surface); font-weight:500;}
.tx-av{color:var(--m3-on-surface) !important; font-weight:500;}

/* Sync state is ambient information: quiet icon and grey label, colour only
   when something actually needs attention */
.sync-chip{background:transparent; color:var(--m3-on-surface-variant); font-weight:400; padding:0 10px;}
.sync-chip:hover{background:rgba(31,31,31,.06);}
.sync-chip .msi{color:var(--text3);}
.sync-chip.warn{color:var(--amber);}
.sync-chip.warn .msi{color:var(--amber);}
.sync-chip.bad{color:var(--red);}
.sync-chip.bad .msi{color:var(--red);}

/* Add-transcript modal: Drive, upload, or paste */
.pt-pane{min-height:0;}
.pt-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:36px 24px;
  border:1.5px dashed var(--m3-outline-variant); border-radius:var(--r-md); cursor:pointer; text-align:center;
  color:var(--m3-on-surface-variant); transition:background-color .12s, border-color .12s;}
.pt-drop:hover, .pt-drop.over{border-color:var(--m3-primary); background:var(--brand-state-hover);}
.pt-drop .msi{font-size:28px; color:var(--m3-primary);}
.pt-drop b{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; font-weight:500; color:var(--m3-on-surface);}
.pt-drop-sub{font-size:12px; color:var(--text3);}
#ptFileList{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
#ptDrive .gm-search{margin-bottom:12px;}

/* Tab overflow: primary tabs plus a menu for the rest */
.ptab-more{position:relative; display:flex; align-items:center; order:2; margin-left:-4px;}
.ptab-plus{width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--m3-on-surface-variant); display:inline-flex; align-items:center; justify-content:center; transition:background-color .12s;}
.ptab-plus:hover{background:rgba(31,31,31,.08); color:var(--m3-on-surface);}
.ptab-plus.hidden{display:none;}
/* Fixed, not absolute. The pane it lives in scrolls itself and therefore
   clips its own overflow, so an absolutely positioned menu was cut off at the
   pane's right edge. Fixed takes it out of that box; openTabMenu places it. */
.tabmenu{display:none; position:fixed; z-index:200; min-width:250px; max-height:min(70vh, 560px); overflow-y:auto; padding:8px;
  background:var(--m3-surface); border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); box-shadow:var(--e3);}
.tabmenu.show{display:block;}
.tabmenu-item{display:flex; align-items:center; gap:12px; width:100%; height:44px; padding:0 12px; border:none; background:transparent;
  border-radius:var(--r-sm); font-size:14px; color:var(--m3-on-surface); text-align:left; transition:background-color .12s;}
.tabmenu-item:hover{background:var(--m3-surface-2);}
.tabmenu-item.active{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.tabmenu-item .msi{font-size:20px; color:var(--m3-on-surface-variant);}
.tabmenu-item.active .msi{color:var(--m3-on-primary-container);}
.tabmenu-item .tm-label{flex:1;}
.tabmenu-item .msi.lock{font-size:16px; color:var(--text3);}

/* Pin state in the tab menu */
.tabmenu-item .msi.check{font-size:18px; color:var(--text3);}
.tabmenu-item.pinned .msi.check{color:var(--m3-primary);}
.tabmenu-item.pinned .tm-label{font-weight:500;}

/* Tighter top rhythm: the tab strip sits close to the panel edge */
.main{padding:12px 24px 32px;}
.ps-main{padding:8px 24px 20px;}
.ps-side{padding:10px 20px 20px;}
.tabrow{margin-bottom:12px;}
.tabhead{margin-bottom:12px;}
.cp-title{padding-top:2px;}

/* Group heading inside the tab menu */
.tabmenu-head{padding:14px 12px 6px; margin-top:6px; border-top:1px solid var(--m3-outline-variant);}
.tabmenu-head .tmh-t{display:block; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:13px; font-weight:500; color:var(--m3-on-surface);}
.tabmenu-head .tmh-s{display:block; font-size:11.5px; line-height:16px; color:var(--text3); margin-top:2px;}

/* Overview: client summary left, the two gauges stacked on the right */
/* the summary spans the full width now that the gauges sit below it */
.ov-top{display:block;}
.ov-gaugecol .ov-card{padding:16px 20px;}
.ov-gaugecol .statcell .ov-big{font-size:24px; margin:2px 0 0;}
.ov-gaugecol .statcell .cv-bar{display:block; margin-top:10px;}
.ov-sep{height:1px; background:var(--m3-outline-variant); margin:24px 0;}


/* Product pill groups as their own cards */

/* Calls and vibe share one card under the gauges */
.ov-card.callstat .cs-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;}
.ov-card.callstat .ov-big{font-size:24px; margin:2px 0 0;}
.ov-card.callstat .cs-vibe{text-align:right;}
.ov-card.callstat .cs-vibe .ov-big{justify-content:flex-end;}
.ov-card.callstat .cv-bar{display:block; margin-top:12px;}

/* AI source star on the gauge cards */
.ov-card:hover .src-star, .statcell:hover .src-star{display:inline-flex; align-items:center; justify-content:center;}
.og-lbl .src-star{margin-left:4px; width:20px; height:20px;}
.og-lbl .src-star .msi{font-size:14px;}
.src-peek{max-height:min(70vh, 680px); overflow-y:auto;}

/* ============ TOP CONTRIBUTORS (stories row) ============ */
.contrib-row{margin-top:16px;}
.contrib-head{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.contrib-head .msi{font-size:18px; color:var(--m3-primary);}
.contrib-head .bt{font-size:11.5px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--text3);}
.contrib-head .contrib-sub{font-size:11.5px; color:var(--text3);}
.contrib-list{display:flex; gap:18px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none;}
.contrib-list::-webkit-scrollbar{display:none;}
.contrib{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:64px; cursor:pointer; background:none; border:none; padding:0; font:inherit;}
.contrib:hover .contrib-av{border-color:var(--m3-surface-3);}
.contrib:hover .contrib-name{color:var(--m3-primary);}
.contrib-ring{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; padding:2.5px;
  background:conic-gradient(var(--m3-primary) var(--fill), var(--m3-surface-3) 0);}
.contrib-ring.client{background:conic-gradient(var(--amber) var(--fill), var(--m3-surface-3) 0);}
.contrib-av{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%;
  border:2px solid var(--m3-surface); font-size:15px; font-weight:500; letter-spacing:.01em;}
.contrib-name{font-size:12px; color:var(--m3-on-surface); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contrib-q{font-size:11px; line-height:16px; font-weight:500; color:var(--m3-on-surface-variant); background:var(--m3-surface-2); border-radius:100px; padding:0 8px;}

/* ---- One contributor, opened from the row above ----
   Wide, and built out of tiles and dials rather than a list of sentences.
   The point is that the shape of a person lands before any of the words do. */
.pmodal-card.person-card{width:720px;}
.person-head{display:flex; align-items:flex-start; gap:16px; padding:24px 24px 18px;}
.person-head .contrib-ring{width:56px; height:56px; flex-shrink:0;}
.person-id{min-width:0; flex:1;}
.person-id h3{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:22px; line-height:28px; font-weight:500; color:var(--m3-on-surface);}
.person-id .who{margin-top:3px; font-size:12.5px; color:var(--m3-on-surface-variant);}

/* The read on someone, before any number */
.person-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.ptag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; line-height:1;
  padding:6px 11px 6px 8px; border-radius:100px; background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.ptag .msi{font-size:14px;}

/* Four headline figures */
.pm-tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px;}
.pm-tile{background:var(--m3-surface-1); border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:2px; cursor:default;}
.pm-tile > .msi{font-size:19px; color:var(--m3-primary); margin-bottom:4px;}
.pt-val{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:25px; line-height:30px; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.pt-lbl{font-size:12px; color:var(--m3-on-surface);}
.pt-sub{font-size:11px; color:var(--m3-on-surface-variant);}

/* Three readings, drawn as arcs so they read as a set */
.pm-gauges{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:16px;}
.pm-gauge{display:flex; align-items:center; gap:12px; background:var(--m3-surface-1); border-radius:var(--r-md); padding:14px; cursor:default;}
.pg-dial{width:46px; height:46px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--m3-primary) var(--p), var(--m3-surface-3) 0);}
.pg-in{width:36px; height:36px; border-radius:50%; background:var(--m3-surface-1); display:grid; place-items:center;}
.pg-in .msi{font-size:17px; color:var(--m3-primary);}
.pg-txt{min-width:0; display:flex; flex-direction:column; gap:1px;}
.pg-val{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:19px; line-height:24px; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.pg-lbl{font-size:11.5px; color:var(--m3-on-surface-variant);}
.pm-gauge.off .pg-val{font-family:inherit; font-size:12.5px; line-height:18px; color:var(--text3);}
.pm-gauge.off .pg-in .msi{color:var(--text3);}

/* How their English reads. Its own block rather than a dial in the row,
   because a number on its own says nothing you could act on: the band and the
   sentence beside it are the part worth reading. */
.pm-english{display:flex; gap:14px; align-items:flex-start; background:var(--m3-surface-1); border-radius:var(--r-md); padding:16px; margin-bottom:16px;}
.pm-english .pg-dial{width:52px; height:52px; flex-shrink:0;}
.pm-english .pg-in{width:40px; height:40px;}
.pm-english .pg-dial.off{background:var(--m3-surface-3);}
.pm-english .pg-dial.off .pg-in .msi{color:var(--text3);}
.pe-txt{min-width:0; flex:1; display:flex; flex-direction:column; gap:6px;}
.pe-top{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;}
.pe-top b{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:22px; font-weight:500; line-height:26px; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.pe-top i{font-style:normal; font-size:12.5px; color:var(--m3-on-surface-variant);}
.pe-band{font-size:11.5px; font-weight:500; padding:4px 10px; border-radius:100px;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.pe-parts{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--m3-on-surface-variant);}
.pe-parts b{font-weight:500; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.pe-note{font-size:12.5px; line-height:1.55; color:var(--m3-on-surface);}
.pe-src{font-size:11px; line-height:1.5; color:var(--text3);}
.pe-run{align-self:flex-start; margin-top:4px;}

/* The smaller facts, on one line */
.pm-facts{display:flex; flex-wrap:wrap; gap:8px;}
.pfact{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px; flex:1; min-width:180px;
  background:var(--m3-surface-1); border-radius:var(--r-md); padding:11px 13px; font-size:12px; color:var(--m3-on-surface-variant);}
.pfact .msi{font-size:15px; color:var(--m3-primary); align-self:center;}
.pfact b{font-size:15px; font-weight:500; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.pfact i{display:block; width:100%; font-style:normal; font-size:11px; color:var(--text3);}

.person-foot{border-top:1px solid var(--m3-outline-variant); margin-top:18px; padding:14px 0 20px; display:flex; gap:10px; align-items:flex-start;
  font-size:11.5px; line-height:1.55; color:var(--text3);}
.person-foot .msi{font-size:15px; flex-shrink:0;}

@media (max-width:780px){
  .pm-tiles{grid-template-columns:repeat(2, 1fr);}
  .pm-gauges{grid-template-columns:1fr;}
}

/* ---- Everyone side by side ---- */
.contrib-cmp{margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:100px;
  border:1px solid var(--m3-outline-variant); background:transparent; color:var(--m3-on-surface); font-size:12px; font-weight:500; cursor:pointer;}
.contrib-cmp:hover{background:var(--brand-state-hover);}
.contrib-cmp .msi{font-size:15px; color:var(--m3-primary);}

.pmodal-card.compare-card{width:min(1000px, 96vw);}
.compare-head{display:flex; align-items:flex-start; gap:16px;}
.compare-head > div:first-child{flex:1; min-width:0;}
.cmp-sub{margin-top:4px; font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant);}
.cmp-side{display:inline-flex; gap:4px; padding:3px; border-radius:100px; background:var(--m3-surface-2); flex-shrink:0;}
.cmp-side .seg-btn{height:30px; padding:0 14px; font-size:12px; border-radius:100px; border:none; background:transparent; color:var(--m3-on-surface-variant); cursor:pointer;}
.cmp-side .seg-btn.on{background:var(--m3-surface); color:var(--m3-on-surface); font-weight:500; box-shadow:var(--e1);}

/* Wide tables scroll inside themselves, never the dialog */
.cmp-scroll{overflow-x:auto; scrollbar-width:none;}
.cmp-scroll::-webkit-scrollbar{display:none;}
.cmp-grid{display:grid; align-items:stretch; min-width:640px;}
.cmp-h{padding:0 8px 10px; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--text3);
  border:none; background:transparent; text-align:left; white-space:nowrap;}
.cmp-name-h{padding-left:2px;}
.cmp-sort{display:inline-flex; align-items:center; gap:3px; cursor:pointer;}
.cmp-sort:hover{color:var(--m3-on-surface);}
.cmp-sort.on{color:var(--m3-primary);}
.cmp-sort .msi{font-size:13px;}

.cmp-who{display:flex; align-items:center; gap:10px; padding:10px 8px 10px 2px; border:none; background:transparent; cursor:pointer;
  border-top:1px solid var(--m3-surface-3); text-align:left; min-width:0;}
.cmp-who:hover .cw-txt b{color:var(--m3-primary);}
.cmp-who .contrib-ring{width:34px; height:34px; flex-shrink:0;}
.cmp-who .contrib-av{font-size:12px;}
.cw-txt{min-width:0; display:flex; flex-direction:column;}
.cw-txt b{font-size:13px; font-weight:500; color:var(--m3-on-surface); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cw-txt i{font-style:normal; font-size:11px; color:var(--text3);}

.cmp-cell{display:flex; flex-direction:column; justify-content:center; gap:5px; padding:10px 8px; border-top:1px solid var(--m3-surface-3);}
.cc-val{font-size:14px; font-weight:500; color:var(--m3-on-surface); font-variant-numeric:tabular-nums;}
.cmp-cell.lead .cc-val{color:var(--m3-primary);}
.cc-bar{height:4px; border-radius:100px; background:var(--m3-surface-3); overflow:hidden;}
.cc-bar > span{display:block; height:100%; border-radius:100px; background:var(--m3-outline-variant);}
.cmp-cell.lead .cc-bar > span{background:var(--m3-primary);}
.cc-na{font-size:11.5px; color:var(--text3);}

@media (max-width:700px){ .compare-head{flex-wrap:wrap;} }

/* Sentiment split under the vibe bar */
.sent-split{display:flex; gap:14px; margin-top:10px;}
.sent{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--m3-on-surface-variant);}
.sent .msi{font-size:14px;}
.sent.good .msi{color:var(--green);}
.sent.bad .msi{color:var(--amber);}

/* Section heading inside a tab (e.g. Call health) */
.ov-sechead{display:flex; align-items:center; gap:8px; margin:0 0 14px; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:16px; line-height:24px; color:var(--m3-on-surface);}
.ov-sechead .msi{font-size:20px; color:var(--m3-primary);}
.ov-card .contrib-row{margin-top:0;}
.ov-card .contrib-head{margin-bottom:14px;}

/* Adding a transcript is the primary action, so it lives in the header */
.tb-addcall{height:36px; padding:0 16px; font-size:13.5px; flex-shrink:0;}
.tb-addcall .msi{font-size:18px;}

/* ============ LOCK SCOPE ============
   One explicit action: lock the scope to set the baseline, unlock to gather
   more. The state is legible at a glance from the icon alone. */
.lock-btn{display:none; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); color:var(--m3-on-surface);
  font-size:13px; font-weight:500; transition:background-color .12s, border-color .12s;}
.lock-btn:hover{background:var(--brand-state-hover); border-color:var(--m3-primary);}
.lock-btn .msi{font-size:17px; color:var(--m3-primary);}
.lock-btn.locked{background:var(--m3-primary-container); border-color:transparent; color:var(--m3-on-primary-container);}
.lock-btn.locked .msi{color:var(--m3-on-primary-container);}

/* A pinned execution view during Discovery: explain, then offer the switch */
.view-locked > *:not(.exec-lock){display:none !important;}
.exec-lock{display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 24px; color:var(--m3-on-surface-variant);}
.exec-lock .es-icon{width:56px; height:56px; border-radius:16px; background:var(--m3-surface-2); color:var(--m3-primary); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.exec-lock .es-icon .msi{font-size:28px;}
.exec-lock h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:18px; font-weight:500; color:var(--m3-on-surface); margin-bottom:8px;}
.exec-lock p{font-size:14px; line-height:22px; max-width:520px; margin-bottom:20px;}
.exec-lock .es-when{margin-top:16px;}

/* Why a Drive document was suggested */
.db-why{display:inline-block; margin-left:8px; font-size:11px; color:var(--text3); background:var(--m3-surface-2); border-radius:100px; padding:1px 8px;}

/* Stage pill on the project card */
.stage-pill{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; margin-bottom:12px;
  border-radius:var(--r-full); font-size:11.5px; font-weight:500; letter-spacing:.02em;
  background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.stage-pill .msi{font-size:14px;}
.stage-pill.exec{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.stage-pill.exec .msi{color:var(--m3-primary);}

/* Something is being generated right now */
.gen-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 24px; gap:6px;}
.gen-state .pt-spinner{margin-bottom:12px;}
.gen-state h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:17px; font-weight:500; color:var(--m3-on-surface);}
.gen-state p{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); max-width:460px;}

/* Shimmer stand-in for a widget still being written */
.sk-widget{position:relative;}
.sk-widget-head{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.sk-dot{width:16px; height:16px; border-radius:50%;}
.sk-widget .sk-line{height:11px;}
.sk-widget-note{font-size:11px; color:var(--text3); margin-top:10px;}

/* Sentiment counts explain themselves */
.sent{border:none; background:transparent; padding:0; cursor:pointer;}
.sent:hover{text-decoration:underline;}
.sent-terms{font-size:11px; color:var(--text3); margin-top:8px;}

/* Co-pilot prompt overflow */
.cp-stub.cp-more{width:32px; padding:0; justify-content:center; border-radius:50%;}
.cp-stub.cp-more .msi{font-size:18px; margin:0;}

/* Profile picture: large, centred, actions on hover */
.pf-avatarwrap{position:relative; width:112px; height:112px; margin:4px auto 28px;}
.pf-avatarwrap .pf-avatar{width:112px; height:112px; font-size:42px; border-radius:50%;}
.pf-avatar-actions{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:50%; background:rgba(31,31,31,.55); opacity:0; transition:opacity .15s;}
.pf-avatarwrap:hover .pf-avatar-actions{opacity:1;}
.pf-av-btn{width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; transition:background-color .12s;}
.pf-av-btn:hover{background:rgba(255,255,255,.3);}
.pf-av-btn .msi{font-size:20px;}

/* ============ SQUIRCLE SHAPE SCALE ============
   Rounder, softer containers; where the browser supports superellipse
   corners we use a true squircle, otherwise the radius carries it. */
:root{ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; }

.proj-card, .new-proj-card, .ov-card, .bento-card, .stat-card, .kcard, .pain-card, .tl-card, .sk-card,
.call-card, .transcript-box, .since-widget, .pain-widget, .drive-banner, .exec-intro, .ps-main, .ps-side,
.signin-card, .gcard, .ob-card, .pmodal-card, .team-panel, .tabmenu, .phase-menu, .acct-pop, .merge-pop,
.rate-pop, .side-sheet, .src-peek, .tl-panel, .compose, .gsidebar, .ov-strip, .pt-drop,
.mfield, .m3-input, .tm-in, .gm-search, .mp-search input, .task-row, .call-row, .tp-row, .bl-row,
.story-row, .q-row, .mp-item, .gs-item, .db-item, .sl-item, .cost-rec, .cv-table, .sk-widget{
  border-radius:var(--r-lg);
}
.mfield, .m3-input, .tm-in, .gm-search, .mp-search input, .pt-drop{border-radius:var(--r-md);}
.task-row, .call-row, .tp-row, .bl-row, .story-row, .q-row, .mp-item, .gs-item, .db-item, .sl-item{border-radius:var(--r-md);}
.pmodal-card, .ob-card, .side-sheet, .compose{border-radius:var(--r-xl);}
.proj-card, .ov-card, .bento-card, .stat-card, .kcard, .pain-card, .sk-card, .call-card, .ps-main, .ps-side{border-radius:var(--r-lg);}

@supports (corner-shape: squircle){
  .proj-card, .new-proj-card, .ov-card, .bento-card, .stat-card, .kcard, .pain-card, .tl-card, .sk-card,
  .call-card, .transcript-box, .since-widget, .pain-widget, .drive-banner, .exec-intro, .ps-main, .ps-side,
  .signin-card, .gcard, .ob-card, .pmodal-card, .team-panel, .tabmenu, .phase-menu, .acct-pop, .merge-pop,
  .rate-pop, .side-sheet, .src-peek, .tl-panel, .compose, .gsidebar, .ov-strip, .pt-drop,
  .mfield, .m3-input, .tm-in, .gm-search, .task-row, .call-row, .tp-row, .bl-row, .story-row, .q-row,
  .mp-item, .gs-item, .db-item, .sl-item, .cost-rec, .sk-widget{
    corner-shape: squircle;
  }
}

/* ============ SCROLL BEHAVIOUR ============
   The page scrolls as one, so the header scrolls away; the tab strip docks
   at the top of the workspace and the Co-pilot stays pinned beside it. */
.main{overflow:visible;}
.body-row{align-items:flex-start;}
/* The tab strip parks at the top of the pane it lives in. That works now the
   pane is the thing that scrolls: it used to stick to the window, which put a
   second bar under the one already pinned there. It bleeds into the panel's
   padding so it spans the full width and nothing shows through behind it. */
/* The strip owns the top of the pane outright. It used to start below the
   pane's own padding, which left a band above it that content slid through
   once it parked. The pane gives up its top padding, the strip takes that
   spacing into its own, and there is nothing above it to show. */
.ps-main{padding-top:0;}
.tabrow{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--m3-surface) 82%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  margin:0 -24px 12px; padding:20px 24px 0; border-radius:var(--r-lg) var(--r-lg) 0 0;}
.ps-side{position:sticky; top:12px; height:calc(100vh - 32px); align-self:start;}
.ps-main{overflow:visible;}

/* What a brief already has, on its row in the list. The tabs only exist once a
   brief is open, so this is what tells you there is more inside. */
.bd-has{display:inline-flex; align-items:center; gap:4px; flex-shrink:0;}
.bh{display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px; border-radius:var(--r-full);
  background:var(--m3-surface-2); color:var(--text3); font-size:10.5px; font-weight:500; white-space:nowrap;}
.bh .msi{font-size:12px;}
.bh.on{background:var(--green-bg); color:var(--green);}
@media (max-width:1100px){ .bd-has{display:none;} }

/* Where you are, on a page that has no tab of its own */
.tk-crumb{display:flex; align-items:center; gap:6px; margin-bottom:10px;
  font-size:12.5px; color:var(--m3-on-surface-variant);}
.tk-crumb > .msi{font-size:16px; color:var(--text3);}
.tk-crumblink{display:inline-flex; align-items:center; gap:6px; border:none; background:transparent;
  color:var(--m3-primary); font:inherit; font-size:12.5px; font-weight:500; padding:2px 0; cursor:pointer;}
.tk-crumblink:hover{text-decoration:underline;}
.tk-crumblink .msi{font-size:16px;}

/* A board reads as the workflows on it. Adding a whole workflow or one line at
   a time lands in the same place, because the grouping is derived from which
   workflow names the requirement. */
.ph-grp{display:flex; align-items:center; gap:10px; padding:16px 14px 8px; margin-top:8px;
  background:transparent; color:var(--m3-on-surface);}
.ph-grp:first-child{margin-top:0; padding-top:8px;}
.ph-grp > .msi{font-size:17px; color:var(--m3-primary);}
.ph-grpmain{flex:1; min-width:0; display:flex; align-items:baseline; gap:9px;}
.ph-grpmain b{font-family:'Google Sans',Roboto,sans-serif; font-size:14px; font-weight:500;}
.ph-grpactor{font-size:11px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--text3);}
.ph-grpcount{font-size:11.5px; color:var(--m3-on-surface-variant); white-space:nowrap;}
.ph-grp.bare > .msi, .ph-grp.bare .ph-grpmain b{color:var(--m3-on-surface-variant);}
/* Rows under a heading sit inside it rather than floating beside it. The
   indent alone says so: a stroke down the side of every group was noise. */
.ph-row.in-grp{padding-left:12px;}

/* Refresh, revealed by hovering the thing it refreshes: the logo for
   everything, the project name for a project, a screen's own heading for that
   screen. Hidden until then, because nothing needs a refresh button on show. */
.hov-refresh{position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none; background:transparent;
  color:var(--m3-on-surface-variant); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .12s, background .12s;}
.hov-refresh .msi{font-size:16px;}
/* The button sits inside its parent's own box, not off its edge: hovering
   across to it must not leave the thing that reveals it, or it can never be
   clicked. */
.tb-brand, .proj-name-wrap, .rf-title{position:relative; padding-right:32px;}
/* A heading is a block and would push the button to the far edge of the page,
   so it hugs its own text instead */
.rf-title{display:inline-flex; align-items:center;}
.tb-brand:hover .hov-refresh, .proj-name-wrap:hover .hov-refresh, .rf-title:hover .hov-refresh,
.hov-refresh:focus-visible{opacity:1; pointer-events:auto;}
.hov-refresh:hover{background:var(--brand-state-hover); color:var(--m3-primary);}
.hov-refresh.spinning{opacity:1; pointer-events:auto;}
.hov-refresh.spinning .msi{animation:syncSpin 1s linear infinite;}

/* The job to be done, kept beside the brief written from it */
.jt-actor{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border-radius:100px;
  background:var(--m3-surface-2); color:var(--m3-on-surface-variant); font-size:11.5px; font-weight:500; margin-bottom:10px;}
.jt-actor .msi{font-size:14px;}
.jt-quote{font-family:'Google Sans',Roboto,sans-serif; font-size:17px; line-height:1.5; color:var(--m3-on-surface);
  border-left:3px solid var(--m3-primary); padding-left:14px; margin-bottom:16px;}
.jt-steps{margin:4px 0 14px 20px; display:flex; flex-direction:column; gap:5px;}
.jt-steps li{font-size:13.5px; line-height:1.55; color:var(--m3-on-surface-variant);}
/* A requirement inside a brief, drawn as the board draws it */
.req-line{display:flex; align-items:flex-start; gap:10px; padding:9px 0;}
.req-line + .req-line{border-top:1px solid var(--m3-divider);}
.req-ic{font-size:16px; color:var(--m3-primary); margin-top:2px; flex-shrink:0;}
.req-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.req-t{font-size:13.5px; line-height:1.45; color:var(--m3-on-surface);}
.req-w{font-size:12px; line-height:1.45; color:var(--green);}
.req-h{font-size:12px; color:var(--m3-on-surface-variant); white-space:nowrap; font-variant-numeric:tabular-nums;}

.jt-foot{display:flex; align-items:baseline; gap:12px; margin-top:18px; padding-top:14px;
  border-top:1px solid var(--m3-divider);}

/* ---- Workflows: the designer's bench ---- */
.wf-top{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
.plan-total{text-align:right; flex-shrink:0;}
.plan-total b{display:block; font-family:'Google Sans',Roboto,sans-serif; font-size:22px; color:var(--m3-primary);}
.plan-total span{font-size:11px; color:var(--text3);}
.wf-top .note{flex:1;}
.wf-card{border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden;
  background:var(--m3-surface);}
.wf-card.done{background:var(--m3-surface-1); cursor:pointer;}
.wf-card.done:hover{background:var(--m3-surface-2); border-color:var(--m3-outline);}
/* Closed, a workflow is its number, its name, who does it and the job to be
   done. Everything else is behind the chevron, and every action sits on one
   bar along the bottom rather than competing with the title. */
.wf-head{display:flex; align-items:flex-start; gap:14px; width:100%; padding:16px 18px;
  border:none; background:transparent; text-align:left; cursor:pointer; font:inherit;}
.wf-head:hover{background:var(--m3-surface-1);}
.wf-title{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.wf-chev{font-size:20px; color:var(--m3-on-surface-variant); flex-shrink:0;}
/* Once a workflow has a brief, its name is the way into it */
.wf-link{cursor:pointer; text-underline-offset:3px;}
.wf-link:hover{color:var(--m3-primary); text-decoration:underline;}
.wf-link:focus-visible{outline:2px solid var(--m3-primary); outline-offset:2px; border-radius:4px;}
/* A rule between the job to be done and the detail under it, so the header
   reads as the header. */
.wf-body{padding:14px 18px 16px 56px; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--m3-divider);}

.wf-foot{display:flex; align-items:center; gap:12px; padding:10px 18px;
  border-top:1px solid var(--m3-divider);}
.wf-price{font-family:'Google Sans',Roboto,sans-serif; font-size:16px; font-weight:500; color:var(--m3-primary);}
.wf-meta{font-size:11.5px; color:var(--text3);}
.wf-footacts{display:flex; align-items:center; gap:8px; margin-left:auto;}
.wf-footacts .m3-btn{height:34px; padding:0 14px; font-size:12.5px;}
.wf-footacts .task-ask{height:34px;}
@media (max-width:900px){
  .wf-body{padding-left:18px;}
  .wf-foot{flex-wrap:wrap;}
  .wf-footacts{margin-left:0; width:100%;}
}

.pj-name{display:flex; align-items:baseline; gap:9px; font-family:'Google Sans',Roboto,sans-serif; font-size:15px; font-weight:500;}
.pj-actor{font-family:'Google Sans Text',Roboto,sans-serif; font-size:11px; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase; color:var(--m3-on-surface-variant); background:var(--m3-surface-2);
  border-radius:100px; padding:2px 9px;}
.pj-jtbd{font-size:13px; line-height:1.55; color:var(--m3-on-surface);}
.pj-steps{margin:2px 0 2px 18px; padding:0; display:flex; flex-direction:column; gap:3px;}
.pj-steps li{font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant);}
.pj-plumb{display:flex; gap:7px; font-size:11.5px; line-height:1.5; color:var(--text3);}
.pj-plumb .msi{font-size:14px; flex-shrink:0; margin-top:1px;}
.pj-problem{font-size:13px; line-height:1.55; color:var(--m3-on-surface-variant);}
.pj-serves, .pj-order{display:flex; gap:7px; font-size:12px; line-height:1.5; color:var(--text3);}
.pj-serves .msi, .pj-order .msi{font-size:14px; flex-shrink:0; margin-top:1px;}
/* The line reads as a continuation of the job above it, so its text starts
   where that text starts and the icon hangs in the gutter. */
.pj-serves{color:var(--m3-primary); display:block; position:relative;}
.pj-serves .msi{position:absolute; left:-21px; top:2px;}
.pj-covers{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0;}
/* The requirements this workflow shows on screen, one chip each. Without this
   they ran together into a single line of text. */
.pj-covers .pill{font-size:12px; line-height:1.45; color:var(--m3-on-surface-variant);
  background:var(--m3-surface-2); border-radius:100px; padding:4px 11px;}
.pj-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; width:170px;}
.plan-note{padding:12px 18px;}
/* The workflow you arrived from a requirement to see */
.plan-job.pj-hit{background:var(--m3-primary-container); animation:pjHit 2.4s ease forwards;}
@keyframes pjHit{0%,60%{background:var(--m3-primary-container);}100%{background:transparent;}}
.plan-run{display:flex; align-items:center; gap:9px; padding:0 18px; font-size:12.5px; color:var(--m3-on-surface-variant);}
.plan-run:empty{display:none;}
.plan-run{padding:12px 18px; border-bottom:1px solid var(--m3-divider);}
.plan-run .msi{font-size:16px; color:var(--m3-primary);}
@media (max-width:900px){ .plan-job{flex-wrap:wrap;} .pj-right{width:100%; align-items:flex-start;} }

/* What a brief is really solving, above the story it was written from */
.brief-central{margin-bottom:16px;}
.bc-line{font-family:'Google Sans',Roboto,sans-serif; font-size:15px; line-height:1.5; color:var(--m3-on-surface); margin-top:4px;}

/* ---- Plans and billing ---- */
.pmodal-card.wide-plans{width:min(880px, 96vw);}
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px;}
.plan-card{position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 16px; text-align:left;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface); cursor:pointer;
  font:inherit; transition:border-color .15s, background .15s;}
.plan-card:hover{background:var(--m3-surface-1);}
.plan-card.on{border-color:var(--m3-primary); background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.pc-name{font-size:11px; font-weight:500; letter-spacing:.045em; text-transform:uppercase; color:var(--m3-on-surface-variant);}
.plan-card.on .pc-name{color:var(--m3-on-primary-container);}
.pc-price{font-family:'Google Sans',Roboto,sans-serif; font-size:28px; line-height:32px;}
.pc-price i{font-style:normal; font-size:12px; color:var(--m3-on-surface-variant); margin-left:6px;}
.plan-card.on .pc-price i{color:var(--m3-on-primary-container); opacity:.8;}
.pc-calls{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500;}
.pc-calls .msi{font-size:15px;}
.pc-for{font-size:11.5px; line-height:1.5; color:var(--m3-on-surface-variant);}
.plan-card.on .pc-for{color:var(--m3-on-primary-container); opacity:.85;}
.pc-tick{position:absolute; top:12px; right:12px; font-size:18px; opacity:0;}
.plan-card.on .pc-tick{opacity:1;}

.pay-block{border-top:1px solid var(--m3-outline-variant); padding-top:18px;}
.qty-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 12px;}
.qty-stepper{display:flex; align-items:center; gap:8px;}
.qty-stepper .al-btn{padding:6px; line-height:0;}
.card-onfile{display:flex; align-items:center; gap:10px; padding:12px 14px; margin:8px 0 12px;
  border-radius:var(--r-md); background:var(--m3-surface-1); border:1px solid var(--m3-outline-variant);}
.card-onfile .msi{font-size:20px; color:var(--m3-primary);}
.card-onfile span{display:flex; flex-direction:column;}
.card-onfile i{font-style:normal; font-size:11.5px; color:var(--m3-on-surface-variant);}
.card-onfile .al-btn{margin-left:auto;}
.card-note{display:flex; gap:9px; align-items:flex-start; max-width:70ch;}
.card-note .msi{font-size:15px; flex-shrink:0;}
.plan-err{margin-top:12px; font-size:12.5px; color:var(--m3-error);}

.plan-mini{display:flex; flex-direction:column; gap:2px;}
.pm-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--m3-divider);}
.pm-name{font-weight:500; min-width:90px;}
.pm-calls{font-size:12.5px; color:var(--m3-on-surface-variant); flex:1;}
.pm-price{font-family:'Google Sans',Roboto,sans-serif; font-size:16px;}
.brief-rates{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px;}

.due-block{border:1px solid var(--amber); border-radius:var(--r-md); overflow:hidden; margin-top:6px;}
.due-head{display:flex; align-items:center; gap:16px; padding:14px 16px; background:var(--amber-bg);}
.due-head b{font-family:'Google Sans',Roboto,sans-serif; font-size:22px; color:var(--amber);}
.due-head span{display:block; font-size:12px; color:var(--amber);}
.due-head .m3-btn{margin-left:auto;}
.due-block .cv-table{margin:0;}

@media (max-width:760px){
  .plan-grid{grid-template-columns:1fr;}
}

/* The prototype a brief produced: a link, a note, and the thing in a frame */
.mock-form{display:grid; grid-template-columns:130px 1fr 1fr auto; gap:10px; align-items:center; margin-bottom:16px;}
.mock-form select.mfield{appearance:none; padding-right:34px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;}
@media (max-width:760px){ .mock-form{grid-template-columns:1fr 1fr;} }
/* One row a version: which one, where it is, what changed, and a way to drop it */
/* Adding sits above the list, so the list stays the thing you read */
.proto-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px;}
.proto-head .m3-btn{flex-shrink:0;}
.proto-table{border-top:1px solid var(--m3-divider);}
/* Every saved version is editable in place: version, link, note, save, open,
   delete. */
.proto-row{display:grid; grid-template-columns:78px minmax(0,1.15fr) minmax(0,1fr) auto;
  align-items:center; gap:12px; padding:8px 2px; border-bottom:1px solid var(--m3-divider);}
.pr-v{font-size:12px; color:var(--m3-on-surface-variant); white-space:nowrap;}
.proto-row .mfield{height:36px; font-size:12.5px;}
.pr-url{color:var(--m3-primary);}
.pr-acts{display:flex; align-items:center; gap:4px;}
.proto-row .pr-save{height:32px; padding:0 16px; font-size:12.5px;}
.proto-row .pr-save:disabled{opacity:0; pointer-events:none;}   /* nothing to save, nothing to see */
.proto-row:focus-within .pr-save:disabled{opacity:.35; pointer-events:none;}
/* Quiet icon actions, the same size as each other */
.ic-btn{width:32px; height:32px; border-radius:50%; border:none; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--m3-on-surface-variant); text-decoration:none;}
.ic-btn:hover{background:var(--m3-surface-2); color:var(--m3-on-surface);}
.ic-btn .msi{font-size:18px;}
.share-row{display:flex; align-items:center; gap:10px;}
.share-row > .msi{font-size:18px; color:var(--m3-primary);}
.share-row .mfield{flex:1; font-size:12.5px;}
@media (max-width:760px){ .proto-row{grid-template-columns:1fr auto;} .pr-url, .pr-note{grid-column:1/-1;} }
.mock-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--m3-surface-1); border:1px solid var(--m3-outline-variant); border-bottom:none; font-size:12.5px;}
.mock-bar .msi{font-size:16px; color:var(--m3-primary);}
.mock-bar a{color:var(--m3-primary); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.mock-bar a:hover{text-decoration:underline;}
.mock-bar .al-btn{margin-left:auto;}
.mock-frame{display:block; width:100%; height:min(70vh, 620px); border:1px solid var(--m3-outline-variant);
  border-radius:0 0 var(--r-md) var(--r-md); background:var(--m3-surface);}
@media (max-width:760px){ .mock-form{grid-template-columns:1fr;} }

/* What a brief costs. A brief bigger than the top tier is delivered as more
   than one, so the chip says so rather than quoting a single large number. */
.bd-price{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--r-full);
  background:var(--green-bg); color:var(--green); font-size:11.5px; font-weight:500; white-space:nowrap;}
.bd-price.split{background:var(--amber-bg); color:var(--amber);}

/* What a project costs, on its card. Reads as a fact, not a warning, until it
   goes past what the plan covers. */
.plan-line{display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:11.5px; color:var(--m3-on-surface-variant);}
.plan-line .msi{font-size:14px; color:var(--m3-primary);}
.plan-line.over{color:var(--amber);}
.plan-line.over .msi{color:var(--amber);}

/* Project card options */
.proj-menu-btn{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; border:none;
  background:transparent; color:var(--text3); display:none; align-items:center; justify-content:center; transition:background-color .12s;}
.proj-card:hover .proj-menu-btn{display:inline-flex;}
.proj-menu-btn:hover{background:rgba(31,31,31,.08); color:var(--m3-on-surface);}
.proj-menu-btn .msi{font-size:18px;}
.proj-menu{display:none; position:absolute; top:44px; right:10px; z-index:30; min-width:168px; padding:6px;
  background:var(--m3-surface); border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); box-shadow:var(--e3);}
.proj-menu.show{display:block;}
.proj-menu button{display:flex; align-items:center; gap:10px; width:100%; height:40px; padding:0 12px; border:none;
  background:transparent; border-radius:var(--r-sm); font-size:13.5px; color:var(--m3-on-surface); text-align:left;}
.proj-menu button:hover{background:var(--m3-surface-2);}
.proj-menu button .msi{font-size:18px; color:var(--m3-on-surface-variant);}
.proj-menu button.danger, .proj-menu button.danger .msi{color:var(--m3-error);}
.proj-menu button.danger:hover{background:var(--m3-error-container);}

/* Pricing basis in Billing */
.cost-basis{font-size:13px; line-height:20px; color:var(--m3-on-surface-variant); margin-bottom:16px;}
.cost-note-inline{display:block; font-size:11px; color:var(--text3);}
.cost-table td.strong{font-weight:500; color:var(--m3-primary);}

/* Co-pilot scope suggestion is an offer, not an action already taken */
.cp-flagbtn{display:inline-flex; align-items:center; gap:6px; height:30px; margin-top:8px; padding:0 12px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-full); background:var(--m3-surface);
  font-size:12.5px; font-weight:500; color:var(--m3-primary);}
.cp-flagbtn:hover{background:var(--brand-state-hover);}
.cp-flagbtn:disabled{color:var(--text3); border-color:transparent; background:transparent;}
.cp-flagbtn .msi{font-size:16px;}

/* ============ EMPTY, LOCKED AND GENERATING STATES ============
   One language for every "nothing here yet" message: centred in the panel,
   neutral tones, brand only on the icon. */
.empty-state, .exec-lock, .gen-state{grid-column:1 / -1; width:100%; max-width:none; margin:0 auto; padding:64px 24px;}
.empty-state .es-icon, .exec-lock .es-icon{width:52px; height:52px; border-radius:var(--r-md); background:var(--m3-surface-2); color:var(--m3-primary);}
.empty-state h4, .exec-lock h4, .gen-state h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:17px; line-height:24px; font-weight:500; color:var(--m3-on-surface); margin-bottom:8px;}
.empty-state p, .exec-lock p, .gen-state p{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); max-width:440px; margin:0 auto 16px;}
.empty-state .es-when, .exec-lock .es-when{display:inline-flex; align-items:center; gap:6px; max-width:none; white-space:normal;
  font-size:12px; line-height:18px; font-weight:400; color:var(--m3-on-surface-variant); background:var(--m3-surface-2);
  border-radius:var(--r-full); padding:6px 14px;}
.empty-state .es-when .msi, .exec-lock .es-when .msi{font-size:15px; color:var(--text3);}
.empty-state.compact{padding:32px 20px;}
.tasks-empty, .calls-empty, .col-empty{text-align:center; color:var(--m3-on-surface-variant); font-size:13.5px; line-height:21px;}

/* Call summary inside an expanded call */
.call-sum p{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); margin:0 0 14px;}
.call-sum.pending{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.tl-bullet .agreed-ic{font-size:16px; color:var(--green); margin-top:2px; flex-shrink:0;}

/* Call sections open on request */
.call-toggle{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); font-size:12.5px; font-weight:500;
  color:var(--m3-on-surface-variant); transition:background-color .12s, color .12s;}
.call-toggle .msi{font-size:16px;}

/* Call summary block */
.call-sum-text{font-size:13.5px; line-height:22px; color:var(--m3-on-surface-variant); margin:0 0 16px;}
.call-sum-note{font-size:11.5px; color:var(--text3);}
.call-sum.pending{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}

/* Summarise action on the call row, with a glowing border while it runs */
.call-sumbtn{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); font-size:12.5px; font-weight:500;
  color:var(--m3-primary); transition:background-color .12s;}
.call-sumbtn:hover{background:var(--brand-state-hover);}
.call-sumbtn.done{color:var(--m3-on-surface-variant);}
.call-sumbtn .msi{font-size:16px;}

.tl-card.summarising{position:relative; border-color:transparent;}
.tl-card.summarising::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--sweep), var(--m3-primary), rgba(11,87,208,.08) 25%, var(--m3-primary) 50%, rgba(11,87,208,.08) 75%, var(--m3-primary));
  animation:sweepBorder 1.6s linear infinite;
}
.tl-card.summarising::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--m3-surface); z-index:-1;
}
@property --sweep{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes sweepBorder{ to{ --sweep:360deg; } }
@media (prefers-reduced-motion:reduce){ .tl-card.summarising::before{animation:none;} }

/* Suggested prompts tucked into the co-pilot input */
.cp-promptwrap{position:relative; display:flex; align-items:center;}
.cp-promptbtn{width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--text3);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color .12s;}
.cp-promptbtn:hover{background:rgba(31,31,31,.08); color:var(--m3-on-surface);}
.cp-promptbtn .msi{font-size:20px;}
.cp-prompts{display:none; position:absolute; bottom:44px; left:0; z-index:40; width:290px; padding:6px;
  background:var(--m3-surface); border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); box-shadow:var(--e3);}
.cp-prompts.show{display:block;}
.cp-prompt{display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 12px; border:none;
  background:transparent; border-radius:var(--r-sm); font-size:13px; line-height:18px; color:var(--m3-on-surface); text-align:left;}
.cp-prompt:hover{background:var(--m3-surface-2);}
.cp-prompt .msi{font-size:18px; color:var(--m3-on-surface-variant); flex-shrink:0;}

/* Section labels inside a call carry their own icon */
.tl-lbl{display:flex; align-items:center; gap:7px; font-size:11px; line-height:16px; text-transform:uppercase;
  letter-spacing:.045em; color:var(--m3-on-surface-variant); font-weight:500; margin:18px 0 10px;}
.tl-lbl .msi{font-size:16px; color:var(--m3-primary);}
.tl-body > .tl-lbl:first-child{margin-top:4px;}
.tl-bullet .ask-ic{font-size:14px; color:var(--m3-primary); margin-top:4px; flex-shrink:0;}
.tl-bullet .agreed-ic{font-size:16px; color:var(--green); margin-top:3px; flex-shrink:0;}

/* =====================================================================
   DARK MODE
   The same Material tokens, retuned: dark surfaces, light on-surface, and
   a lighter primary so text on dark keeps its contrast.
   ===================================================================== */
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --m3-primary:#a8c7fa; --m3-on-primary:#062e6f;
    --m3-primary-container:#0842a0; --m3-on-primary-container:#d3e3fd;
    --m3-secondary-container:#004a77; --m3-on-secondary-container:#c2e7ff;
    --m3-surface:#131314; --m3-surface-1:#1b1b1f; --m3-surface-2:#1f2023; --m3-surface-3:#282a2d; --m3-surface-4:#303134;
    --m3-outline:#8e918f; --m3-outline-variant:#444746;
    --m3-on-surface:#e3e3e3; --m3-on-surface-variant:#c4c7c5;
    --m3-inverse-surface:#e3e3e3; --m3-inverse-on-surface:#303030;
    --m3-error:#f2b8b5; --m3-error-container:#8c1d18;
    --blue:#a8c7fa; --blue-dark:#c5dcff; --blue-bg:#0842a0;
    --green:#6dd58c; --green-bg:#0f5223;
    --amber:#f9cf7f; --amber-bg:#5c4200;
    --red:#f2b8b5; --red-bg:#8c1d18;
    --text:#e3e3e3; --text2:#c4c7c5; --text3:#8e918f;
    --border:#444746; --bg2:#1b1b1f; --bg3:#282a2d;
    --brand-avatar:#174082;
    --brand-solid:#174082; --brand-on-solid:#d6e2f5;
    --brand-state-hover:rgba(168,199,250,.12);
    --e1:0 1px 2px 0 rgba(0,0,0,.45), 0 1px 3px 1px rgba(0,0,0,.3);
    --e2:0 1px 2px 0 rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.3);
    --e3:0 1px 3px 0 rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
  }
  :root:not([data-theme="light"]) body{background:var(--m3-surface); color:var(--m3-on-surface);}
  :root:not([data-theme="light"]) #view-signin{background:var(--m3-surface);}
  :root:not([data-theme="light"]) .m3-btn.filled, :root:not([data-theme="light"]) .btn-filled,
  :root:not([data-theme="light"]) .gnext{color:var(--m3-on-primary);}
  :root:not([data-theme="light"]) .cp-msg.user, :root:not([data-theme="light"]) .cp-msg.me{color:var(--m3-on-primary);}
  :root:not([data-theme="light"]) .sk{background:linear-gradient(90deg,var(--m3-surface-2) 25%,var(--m3-surface-3) 37%,var(--m3-surface-2) 63%);}
  :root:not([data-theme="light"]) .fp-av, :root:not([data-theme="light"]) .contrib-av, :root:not([data-theme="light"]) .tx-av{color:#131314 !important;}
  :root:not([data-theme="light"]) .gbtn-g{background:var(--m3-surface-2); color:var(--m3-on-surface); border-color:var(--m3-outline-variant);}
  :root:not([data-theme="light"]) .pf-av-btn{background:rgba(255,255,255,.14);}
}

/* The same palette when the user picks dark explicitly */
  :root[data-theme="dark"]{
    color-scheme: dark;
    --m3-primary:#a8c7fa; --m3-on-primary:#062e6f;
    --m3-primary-container:#0842a0; --m3-on-primary-container:#d3e3fd;
    --m3-secondary-container:#004a77; --m3-on-secondary-container:#c2e7ff;
    --m3-surface:#131314; --m3-surface-1:#1b1b1f; --m3-surface-2:#1f2023; --m3-surface-3:#282a2d; --m3-surface-4:#303134;
    --m3-outline:#8e918f; --m3-outline-variant:#444746;
    --m3-on-surface:#e3e3e3; --m3-on-surface-variant:#c4c7c5;
    --m3-inverse-surface:#e3e3e3; --m3-inverse-on-surface:#303030;
    --m3-error:#f2b8b5; --m3-error-container:#8c1d18;
    --blue:#a8c7fa; --blue-dark:#c5dcff; --blue-bg:#0842a0;
    --green:#6dd58c; --green-bg:#0f5223;
    --amber:#f9cf7f; --amber-bg:#5c4200;
    --red:#f2b8b5; --red-bg:#8c1d18;
    --text:#e3e3e3; --text2:#c4c7c5; --text3:#8e918f;
    --border:#444746; --bg2:#1b1b1f; --bg3:#282a2d;
    --brand-avatar:#174082;
    --brand-solid:#174082; --brand-on-solid:#d6e2f5;
    --brand-state-hover:rgba(168,199,250,.12);
    --e1:0 1px 2px 0 rgba(0,0,0,.45), 0 1px 3px 1px rgba(0,0,0,.3);
    --e2:0 1px 2px 0 rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.3);
    --e3:0 1px 3px 0 rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
  }
  :root[data-theme="dark"] body{background:var(--m3-surface); color:var(--m3-on-surface);}
  :root[data-theme="dark"] #view-signin{background:var(--m3-surface);}
  :root[data-theme="dark"] .m3-btn.filled, :root[data-theme="dark"] .btn-filled,
  :root[data-theme="dark"] .gnext{color:var(--m3-on-primary);}
  :root[data-theme="dark"] .cp-msg.user, :root[data-theme="dark"] .cp-msg.me{color:var(--m3-on-primary);}
  :root[data-theme="dark"] .sk{background:linear-gradient(90deg,var(--m3-surface-2) 25%,var(--m3-surface-3) 37%,var(--m3-surface-2) 63%);}
  :root[data-theme="dark"] .fp-av, :root[data-theme="dark"] .contrib-av, :root[data-theme="dark"] .tx-av{color:#131314 !important;}
  :root[data-theme="dark"] .gbtn-g{background:var(--m3-surface-2); color:var(--m3-on-surface); border-color:var(--m3-outline-variant);}
  :root[data-theme="dark"] .pf-av-btn{background:rgba(255,255,255,.14);}

/* =====================================================================
   MOBILE
   One column below 900px: the workspace stacks over the Co-pilot, the
   header keeps only what identifies the project, and every wide surface
   scrolls inside itself instead of pushing the page sideways.
   ===================================================================== */
@media (max-width:1024px){
  .proj-split{grid-template-columns:1fr;}
  /* workspace first, Co-pilot beneath it */
  .ps-main{grid-column:1; grid-row:1;}
  .ps-divider{grid-column:1; grid-row:2;}
  .ps-side{grid-column:1; grid-row:3;}
  .ps-divider{display:none;}
  .ps-side{position:static; height:auto; max-height:70vh; margin-top:16px;}
  .cp-thread{max-height:46vh;}
}
@media (max-width:900px){
  .main{padding:10px 14px 28px;}
  .topbar{height:auto; min-height:60px; padding:8px 12px; gap:10px; flex-wrap:wrap;}
  .tb-left{gap:8px; flex:1 1 auto;}
  .tb-brand{display:none !important;}
  .tb-center{order:3; flex:1 1 100%; justify-content:flex-start;}
  .tb-right{gap:6px;}
  .tb-projname{font-size:15px; min-width:0;}
  .tb-projname #projNameText{max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lock-btn .lbl{display:none;}
  .lock-btn{width:36px; min-width:36px; padding:0; justify-content:center;}
  .tb-addcall .lbl{display:none;}
  .tb-addcall{width:40px; min-width:40px; padding:0; justify-content:center; flex-shrink:0;}
  .sync-chip .lbl{display:none;}
  .sync-chip{padding:0 8px;}
  .ps-main{padding:8px 14px 18px;}
  .ps-side{padding:12px 14px 16px;}
  .tabrow{margin:-6px -14px 10px; padding:10px 14px 0;}
  .ptab{height:44px; padding:0 12px; font-size:13px;}
  .tabhead{flex-wrap:wrap; gap:10px;}
  .tabhead h2, h2{font-size:19px; line-height:26px;}
  .ov-bento, .task-bento, .pain-bento, .proj-grid{grid-template-columns:1fr !important;}
  .ov-card, .bento-card{padding:16px;}
  .ov-card.span2, .ov-card.span4{grid-column:1 / -1;}
  .pmodal-card{width:auto !important; max-width:none; margin:0 12px; max-height:88vh; overflow-y:auto;}
  /* narrow: the card itself scrolls, so the shell goes back to its own height */
  .pf-shell{grid-template-columns:1fr; height:auto;}
  .pf-nav{flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--m3-outline-variant); padding:8px;}
  .pf-navitem{white-space:nowrap;}
  .pf-grid, .pt-optrow{grid-template-columns:1fr;}
  .cost-table, .cv-table, .tm-table{display:block; overflow-x:auto; white-space:nowrap;}
  .contrib-list{gap:12px;}
  .acct-pop, .tabmenu, .phase-menu, .cp-prompts, .proj-menu{width:min(88vw,320px);}
  .call-sumbtn .lbl{display:none;}
  .call-sumbtn{width:34px; min-width:34px; padding:0; justify-content:center; flex-shrink:0;}
  .tl-top{gap:8px; min-width:0;}
  .tl-title{min-width:0;}
  .tl-mini{flex-shrink:0;}
  .tl-card{padding:14px;}
  .gcard{padding:32px 20px 24px;}
  .signin-card{padding:32px 22px;}
}
@media (max-width:560px){
  .tb-projname #projNameText{max-width:44vw;}
  .facepile .fp-av:nth-child(n+5){display:none;}
  .ov-name{font-size:19px;}
  .empty-state, .exec-lock, .gen-state{padding:40px 16px;}
  .m3-headline{font-size:24px; line-height:32px;}
}

/* Topbar chips take their colour from tokens so dark mode stays readable */
.sell-chip{background:var(--amber-bg); color:var(--amber);}
.cost-chip{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.cost-chip .msi{color:var(--m3-primary);}
.tl-chip{background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sell-chip{background:#5c4200; color:#f9cf7f;}
}

.cp-min .mobile-only{display:none;}
@media (max-width:900px){ .cp-min .mobile-only{display:block;} .cp-min .desktop-only{display:none;} }

/* ============ MOBILE: floating actions and full-screen Co-pilot ============ */
.mobile-fabs{display:none;}
@media (max-width:900px){
  .mobile-fabs.show{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); justify-content:center;
    background:linear-gradient(to top, var(--m3-surface) 62%, transparent);}
  .mfab{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px;
    border:1px solid var(--m3-outline-variant); border-radius:var(--r-full); background:var(--m3-surface);
    color:var(--m3-on-surface); font-size:14px; font-weight:500; box-shadow:var(--e2); flex:1 1 0; max-width:220px;}
  .mfab .msi{font-size:20px; color:var(--m3-primary);}
  .mfab.primary{background:var(--m3-primary); color:var(--m3-on-primary); border-color:transparent;}
  .mfab.primary .msi{color:var(--m3-on-primary);}
  .main{padding-bottom:88px;}

  /* The Co-pilot takes the whole screen so questions are easy to type */
  .ps-side.mobile-open{position:fixed; inset:0; z-index:200; height:100dvh; max-height:none; margin:0;
    border:none; border-radius:0; padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
  .ps-side.mobile-open .cp-thread{max-height:none; flex:1;}
  .ps-side.mobile-open .cp-min .msi{font-size:22px;}
  body.sheet-open{overflow:hidden;}
  body.sheet-open .mobile-fabs.show{display:none;}
  .ps-side:not(.mobile-open){display:none;}
  .cp-min::after{content:none;}
}

/* Dark mode dividers sit quieter than the outline used for controls */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --m3-divider:rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .topbar{border-bottom-color:var(--m3-divider);}
  :root:not([data-theme="light"]) .ov-sep, :root:not([data-theme="light"]) .cost-hr,
  :root:not([data-theme="light"]) .cd-line, :root:not([data-theme="light"]) hr{border-color:var(--m3-divider); background:transparent;}
  :root:not([data-theme="light"]) .tabrow, :root:not([data-theme="light"]) .ptabs, :root:not([data-theme="light"]) .cp-title{border-bottom-color:var(--m3-divider);}
  :root:not([data-theme="light"]) .acct-head, :root:not([data-theme="light"]) .acct-foot,
  :root:not([data-theme="light"]) .tabmenu-head, :root:not([data-theme="light"]) .ci-stats,
  :root:not([data-theme="light"]) .proj-card .stat, :root:not([data-theme="light"]) .ov-about{border-color:var(--m3-divider);}
  :root:not([data-theme="light"]) .cv-table td, :root:not([data-theme="light"]) .cost-table td,
  :root:not([data-theme="light"]) .tm-table td{border-bottom-color:var(--m3-divider);}
  :root:not([data-theme="light"]) .cv-table th, :root:not([data-theme="light"]) .cost-table th,
  :root:not([data-theme="light"]) .tm-table th{border-bottom-color:rgba(255,255,255,.12);}
  :root:not([data-theme="light"]) .proj-card, :root:not([data-theme="light"]) .ov-card,
  :root:not([data-theme="light"]) .bento-card, :root:not([data-theme="light"]) .tl-card,
  :root:not([data-theme="light"]) .pain-card, :root:not([data-theme="light"]) .kcard,
  :root:not([data-theme="light"]) .ps-main, :root:not([data-theme="light"]) .ps-side,
  :root:not([data-theme="light"]) .new-proj-card{border-color:rgba(255,255,255,.10);}
}

/* Softer dividers when dark is chosen explicitly */
/* Dark mode dividers sit quieter than the outline used for controls */
  :root[data-theme="dark"]{ --m3-divider:rgba(255,255,255,.07); }
  :root[data-theme="dark"] .topbar{border-bottom-color:var(--m3-divider);}
  :root[data-theme="dark"] .ov-sep, :root[data-theme="dark"] .cost-hr,
  :root[data-theme="dark"] .cd-line, :root[data-theme="dark"] hr{border-color:var(--m3-divider); background:transparent;}
  :root[data-theme="dark"] .tabrow, :root[data-theme="dark"] .ptabs, :root[data-theme="dark"] .cp-title{border-bottom-color:var(--m3-divider);}
  :root[data-theme="dark"] .acct-head, :root[data-theme="dark"] .acct-foot,
  :root[data-theme="dark"] .tabmenu-head, :root[data-theme="dark"] .ci-stats,
  :root[data-theme="dark"] .proj-card .stat, :root[data-theme="dark"] .ov-about{border-color:var(--m3-divider);}
  :root[data-theme="dark"] .cv-table td, :root[data-theme="dark"] .cost-table td,
  :root[data-theme="dark"] .tm-table td{border-bottom-color:var(--m3-divider);}
  :root[data-theme="dark"] .cv-table th, :root[data-theme="dark"] .cost-table th,
  :root[data-theme="dark"] .tm-table th{border-bottom-color:rgba(255,255,255,.12);}
  :root[data-theme="dark"] .proj-card, :root[data-theme="dark"] .ov-card,
  :root[data-theme="dark"] .bento-card, :root[data-theme="dark"] .tl-card,
  :root[data-theme="dark"] .pain-card, :root[data-theme="dark"] .kcard,
  :root[data-theme="dark"] .ps-main, :root[data-theme="dark"] .ps-side,
  :root[data-theme="dark"] .new-proj-card{border-color:rgba(255,255,255,.10);}

/* Light / dark toggle */
.theme-toggle{width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:var(--m3-on-surface-variant);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background-color .12s;}
.theme-toggle:hover{background:rgba(127,127,127,.16); color:var(--m3-on-surface);}
.theme-toggle .msi{font-size:20px;}

/* New Drive documents waiting to be analyzed */
.proj-sync{display:none; align-items:center; gap:12px; margin-bottom:18px; padding:14px 18px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); background:var(--m3-surface-1);
  font-size:13.5px; line-height:20px; color:var(--m3-on-surface-variant);}
.proj-sync.show{display:flex;}
.proj-sync .msi{font-size:20px; color:var(--m3-primary); flex-shrink:0;}
.proj-sync b{color:var(--m3-on-surface); font-weight:500;}
/* Documents waiting to be read. It sits top right, out of the way of the
   title, and slides left when the options button appears on hover. */
.newdoc-pill{position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  border-radius:var(--r-full); background:var(--m3-primary-container); color:var(--m3-on-primary-container);
  font-size:11.5px; font-weight:500; transition:right .12s;}
.proj-card:hover .newdoc-pill{right:48px;}
.newdoc-pill .msi{font-size:14px;}

/* Sync chip: small book icon that spins while analysing, count as superscript */
.sync-ic{position:relative; display:inline-flex; align-items:center;}
.sync-ic .msi{font-size:16px;}
.sync-count{position:absolute; top:-5px; right:-7px; font-size:9.5px; line-height:1; font-weight:600;
  color:var(--m3-primary); background:var(--m3-surface); border-radius:100px; padding:1px 3px;}
.sync-count:empty{display:none;}
/* Working. The sparkle turns rather than blinking: a pulse reads as a status
   light, a rotation reads as something being done, and the chip has to say
   that from across the room without anyone reading the words. */
.sync-chip{position:relative; overflow:hidden;}
.sync-chip.busy{color:var(--m3-primary);}
.sync-chip.busy .sync-ic .msi{color:var(--m3-primary); animation:syncSpin 1.9s linear infinite; transform-origin:50% 50%;}
@keyframes syncSpin{to{transform:rotate(360deg);}}

/* How far through, along the foot of the chip */
.sync-prog{display:none; position:absolute; left:8px; right:8px; bottom:3px; height:2px; border-radius:100px; background:var(--m3-surface-3); overflow:hidden;}
.sync-prog > span{display:block; height:100%; border-radius:100px; background:var(--m3-primary); transition:width .5s cubic-bezier(.2,0,0,1);}
/* A sheen travelling over the filled part, so a long document still looks like
   it is moving while the count sits on the same number */
.sync-prog > span::after{content:''; position:absolute; inset:0; border-radius:100px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:syncSheen 1.6s ease-in-out infinite;}
@keyframes syncSheen{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.sync-chip.busy .lbl{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .sync-chip.busy .sync-ic .msi{animation:none;}
  .sync-prog > span::after{animation:none;}
}

/* ============ BUILD SPEC ============ */
/* Sixteen chips across two rows put the list below the fold. They sit behind
   one button and open where they are, rather than in a menu over the page. */
.flt-wrap{margin-bottom:14px;}
/* Sorting on the left, Filters pushed to the far right of the same line */
.flt-wrap .rel-sort{align-items:center; margin:0;}
.flt-toggle{margin-left:auto; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:100px;
  border:1px solid var(--m3-outline-variant); background:transparent; color:var(--m3-on-surface);
  font-family:'Google Sans',Roboto,sans-serif; font-size:12.5px; font-weight:500; cursor:pointer;}
.flt-toggle:hover{background:var(--brand-state-hover);}
.flt-wrap.open .flt-toggle{background:var(--m3-surface-2); border-color:var(--m3-outline-variant);}
.flt-toggle > .msi{font-size:16px;}
.flt-chev{margin-left:2px;}
/* Which filter is on, so a narrowed list can never look like the whole list */
.flt-on{padding:2px 8px; border-radius:100px; background:var(--m3-primary-container); color:var(--m3-on-primary-container); font-size:11.5px;}


.build-filters{display:none; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.flt-wrap.open .build-filters{display:flex;}
.bd-filter{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); font-size:13px; font-weight:500;
  color:var(--m3-on-surface-variant); transition:background-color .12s, color .12s;}
.bd-filter:hover{background:var(--brand-state-hover);}
.bd-filter.on{background:var(--m3-primary-container); border-color:transparent; color:var(--m3-on-primary-container);}
.bd-filter .msi{font-size:17px;}
.bd-filter .count-badge{background:rgba(127,127,127,.18);}

.bd-group{margin-bottom:28px;}
.bd-grouphead{display:flex; align-items:center; gap:9px; margin-bottom:14px;
  font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; color:var(--m3-on-surface);}
.bd-grouphead .msi{font-size:19px; color:var(--m3-primary);}
.bd-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; align-items:start;}

.bd-card{position:relative; display:flex; flex-direction:column; padding:16px 18px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); background:var(--m3-surface);}
.bd-card.building{border-color:var(--m3-primary);}
.bd-card.done{opacity:.62;}
.bd-card.done .bd-title{text-decoration:line-through;}
.bd-card .tp-del{position:absolute; top:10px; right:10px; display:none;}
.bd-card:hover .tp-del{display:inline-flex;}
.bd-head{display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding-right:22px;}
.bd-title{flex:1; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; font-weight:500; line-height:22px;
  color:var(--m3-on-surface);}
.bd-chev{font-size:20px; color:var(--text3); flex-shrink:0;}
.bd-surface{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--m3-on-surface-variant);
  background:var(--m3-surface-2); border-radius:var(--r-full); padding:4px 10px; margin-bottom:12px; align-self:flex-start;}
.bd-surface .msi{font-size:14px; color:var(--m3-primary);}
.bd-detail{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); margin:0 0 14px;}
.bd-sub{display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.045em;
  font-weight:500; color:var(--text3); margin:12px 0 8px;}
.bd-sub .msi{font-size:15px; color:var(--m3-primary);}
.bd-li{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:20px;
  color:var(--m3-on-surface-variant); padding:2px 0;}
.bd-dot{width:5px; height:5px; border-radius:50%; background:var(--m3-outline); margin-top:8px; flex-shrink:0;}
.bd-li .bd-tick{font-size:15px; color:var(--green); margin-top:2px; flex-shrink:0;}
.bd-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:12px;}
.bd-size{font-size:11.5px; font-weight:500; color:var(--m3-on-surface-variant); background:var(--m3-surface-2);
  border-radius:var(--r-full); padding:3px 10px;}
.bd-dep{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text3); max-width:170px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bd-dep .msi{font-size:14px;}
.bd-status{margin-left:auto; height:28px; padding:0 12px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:transparent; font-size:12px; font-weight:500;
  color:var(--m3-on-surface-variant);}
.bd-status:hover{background:var(--brand-state-hover); color:var(--m3-primary);}
.bd-card.building .bd-status{background:var(--m3-primary-container); border-color:transparent; color:var(--m3-on-primary-container);}
.bd-card.done .bd-status{background:var(--green-bg); border-color:transparent; color:var(--green);}
@media (max-width:900px){ .bd-grid{grid-template-columns:1fr;} }

/* An ask already handled shows ticked and struck through on the call */
.tl-bullet.done .tl-btxt{color:var(--text3); text-decoration:line-through;}
.tl-bullet.done .ask-ic{color:var(--green);}
.tl-bullet .task-owner{margin-left:8px;}

/* Asks list */
.ask-ic-lead{display:inline-flex; align-items:center; justify-content:center; width:28px; flex-shrink:0;}
.ask-ic-lead .msi{font-size:17px; color:var(--m3-primary);}
.task-row.done .ask-ic-lead .msi{color:var(--green);}
.ask-size{font-size:11.5px; font-weight:500; color:var(--m3-on-surface-variant); background:var(--m3-surface-2);
  border-radius:var(--r-full); padding:3px 9px; flex-shrink:0;}
.ask-state{font-size:11px; font-weight:500; border-radius:var(--r-full); padding:3px 10px; flex-shrink:0;
  background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.ask-state.new{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.ask-state.assumed{background:var(--amber-bg); color:var(--amber);}

/* Locking the scope: a short ceremony naming what is happening */
.lock-cer{padding:4px 0 8px;}
.lock-cer-head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.lock-cer-head b{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:16px; font-weight:500; color:var(--m3-on-surface);}
.lock-stage{display:flex; align-items:center; gap:12px; padding:7px 0; font-size:13.5px;
  color:var(--text3); transition:color .3s;}
.lock-stage .tick{font-size:19px; color:var(--m3-outline-variant); transition:color .3s;}
.lock-stage.active{color:var(--m3-on-surface);}
.lock-stage.active .tick{color:var(--m3-primary); animation:syncPulse 1.1s ease-in-out infinite;}
.lock-stage.done{color:var(--m3-on-surface-variant);}
.lock-stage.done .tick{color:var(--green);}

/* Baseline rows can be excluded or removed, which reopens the lock */
.bl-row{position:relative;}
.bl-acts{display:none; gap:2px; margin-left:auto; flex-shrink:0;}
.bl-row:hover .bl-acts{display:flex;}
.bl-act{width:30px; height:30px; border-radius:50%; border:none; background:transparent;
  color:var(--m3-on-surface-variant); display:inline-flex; align-items:center; justify-content:center;}
.bl-act:hover{background:rgba(127,127,127,.16); color:var(--m3-on-surface);}
.bl-act.danger:hover{background:var(--m3-error-container); color:var(--m3-error);}
.bl-act .msi{font-size:16px;}
.bl-relock{display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:14px 18px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); background:var(--m3-surface-1);
  font-size:13.5px; line-height:20px; color:var(--m3-on-surface-variant);}
.bl-relock .msi{font-size:20px; color:var(--m3-primary); flex-shrink:0;}
.bl-relock b{color:var(--m3-on-surface); font-weight:500;}
.bl-relock .m3-btn{margin-left:auto; height:36px; flex-shrink:0;}

/* Baseline area tag, and the board primer that ends the lock ceremony */
.bl-area{font-size:11px; font-weight:500; border-radius:var(--r-full); padding:3px 9px; flex-shrink:0;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.lock-btn.dirty{border-color:var(--m3-primary); color:var(--m3-primary);}
.board-primer p{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); margin:0 0 16px;}
.board-primer b{color:var(--m3-on-surface);}
.bp-row{display:flex; align-items:flex-start; gap:12px; padding:8px 0; font-size:13px; line-height:20px;
  color:var(--m3-on-surface-variant);}
.bp-chip{flex-shrink:0; min-width:104px; text-align:center; font-size:11.5px; font-weight:500;
  border-radius:var(--r-full); padding:4px 10px;}
.bp-chip.new{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.bp-chip.assumed{background:var(--amber-bg); color:var(--amber);}
.bp-chip.covered{background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.bp-foot{margin-top:14px; font-size:12.5px; line-height:19px; color:var(--text3);}

/* ============ ALERTS ============ */
.alerts-list{display:flex; flex-direction:column; gap:26px;}
/* the list needs no heading: the table header says everything */
.alert-sec .alert-sechead{display:flex; align-items:center; gap:9px; margin-bottom:12px;
  font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; color:var(--m3-on-surface);}
.alert-sec .alert-sechead .msi{font-size:19px; color:var(--m3-primary);}
.alert-note{font-family:'Google Sans Text',Roboto,Arial,sans-serif; font-size:12px; color:var(--text3); font-weight:400;}
.alert-sec .kcard{margin-bottom:10px;}
.alerts-list .col-empty{padding:14px 0;}

/* Client approval email */
.ap-meta{display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:12.5px; color:var(--text3);}
.ap-pill{font-size:11.5px; font-weight:500; border-radius:var(--r-full); padding:3px 10px;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.ap-pill.assumed{background:var(--amber-bg); color:var(--amber);}
.ap-metanote{margin-left:4px;}
.ap-note{font-size:12.5px; color:var(--m3-error); margin-top:10px; min-height:16px;}
#apBody{font-family:'Google Sans Text',Roboto,Arial,sans-serif; font-size:13.5px;}

/* Alert cards read as tickets */
.k-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.k-size{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--text3);}
.k-hours{font-size:11.5px; color:var(--m3-on-surface-variant);}
.kcard .title{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; font-weight:500; line-height:22px; color:var(--m3-on-surface);}
.k-need{font-size:13px; line-height:20px; color:var(--m3-on-surface-variant); margin-top:6px;}
.k-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:11.5px; color:var(--text3);}
.k-meta span{display:inline-flex; align-items:center; gap:5px;}
.k-meta .msi{font-size:14px;}
.kactions{display:flex; align-items:center; gap:8px; margin-top:14px;}
.kactions button{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px;
  border-radius:var(--r-full); border:1px solid var(--m3-outline-variant); background:var(--m3-surface);
  font-size:13px; font-weight:500; color:var(--m3-on-surface-variant); flex:0 0 auto;}
.kactions button:hover{background:var(--brand-state-hover);}
.kactions button.primary{background:var(--m3-primary); border-color:transparent; color:var(--m3-on-primary);}
.kactions button.primary:hover{background:var(--blue-dark);}
.kactions .msi{font-size:16px;}
.kstate.out{display:inline-flex; align-items:center; font-size:12px; font-weight:500; color:var(--amber);
  background:var(--amber-bg); border-radius:var(--r-full); padding:5px 12px;}
.kcard:has(.kstate.out){border-color:var(--amber);}

/* Confidence meter on an alert */
.k-conf{display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0;}
.kc-bar{width:56px; height:5px; border-radius:100px; background:var(--m3-surface-3); overflow:hidden; flex-shrink:0;}
.kc-fill{display:block; height:100%; border-radius:100px; background:var(--m3-primary);}
.k-conf b{font-size:12px; font-weight:500; color:var(--m3-on-surface);}
.kc-lbl{font-size:11.5px; color:var(--text3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.k-conf.high .kc-fill{background:var(--red);}
.k-conf.high b{color:var(--red);}
.k-conf.mid .kc-fill{background:var(--amber);}
.k-conf.mid b{color:var(--amber);}
.k-conf.low .kc-fill{background:var(--m3-outline);}
.k-conf.low b{color:var(--m3-on-surface-variant);}
.k-top{gap:14px;}
.k-top .k-size{margin-left:auto; flex-shrink:0;}
.k-top .k-hours{flex-shrink:0; padding-right:26px;}
.kcard .mtg-icon-btn{top:8px; right:8px;}

/* Picking alerts for the approval email */
.k-pick{position:absolute; top:10px; left:12px; display:flex; align-items:center;}
.k-pick input{width:17px; height:17px; accent-color:var(--m3-primary); cursor:pointer;}
.kcard:has(.k-pick){padding-left:42px;}
.kcard.picked{border-color:var(--m3-primary); background:var(--brand-state-hover);}
.send-btn:disabled{opacity:.5; cursor:default;}

/* Impact: hours and money, with the workings on hover */
.k-impact{display:inline-flex; align-items:center; gap:7px; margin-left:auto; flex-shrink:0; padding-right:26px; cursor:help;}
.ki-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.045em; color:var(--text3);}
.k-impact b{font-size:13px; font-weight:500; color:var(--m3-on-surface);}
.ki-amt{font-size:13px; font-weight:500; color:var(--green);}
.ki-amt.muted{font-size:11.5px; font-weight:400; color:var(--text3);}
.ki-info{font-size:14px; color:var(--m3-outline);}

/* ============ ALERTS TABLE ============ */
.al-head, .al-main{display:grid; grid-template-columns:38px minmax(0,1fr) 96px 148px 168px auto 34px;
  align-items:center; gap:12px;}
/* The header shares the row's box model (1px border + 16px padding) so every
   column lines up with the cells beneath it */
.al-head{border:1px solid transparent; border-bottom:1px solid var(--m3-outline-variant); padding:0 16px 10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.045em; font-weight:500;}
.al-head > span{color:var(--text3); font-size:11px; font-weight:500;}
.al-head .al-hrs, .al-head .al-bill{text-align:center;}
.al-head .al-pick input{width:16px; height:16px; accent-color:var(--m3-primary); cursor:pointer;}
.al-row{border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); background:var(--m3-surface);
  margin-top:10px; transition:border-color .12s, background-color .12s;}
.al-row:hover{border-color:var(--m3-outline);}
.al-row.picked{border-color:var(--m3-primary); background:var(--brand-state-hover);}
.al-row.marked{border-color:var(--amber);}
.al-main{padding:14px 16px; cursor:pointer;}
.al-pick{display:flex; align-items:center; justify-content:center;}
.al-pick input{width:17px; height:17px; accent-color:var(--m3-primary); cursor:pointer;}
.al-title{font-size:14px; line-height:20px; color:var(--m3-on-surface); font-weight:500;}
.al-tag{display:inline-block; margin-top:6px; font-size:11px; font-weight:500; border-radius:var(--r-full);
  padding:3px 10px; background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.al-tag.out{background:var(--amber-bg); color:var(--amber);}
.al-tag.ok{background:var(--green-bg); color:var(--green);}
.al-hrs{font-size:13px; color:var(--m3-on-surface-variant); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:center;}
.al-bill{font-size:13px; font-weight:500; color:var(--green); font-variant-numeric:tabular-nums; cursor:help; white-space:nowrap; text-align:center;}
.al-bill .muted{font-size:11.5px; font-weight:400; color:var(--text3);}
.al-conf{display:flex; align-items:center; gap:8px; min-width:0;}
.al-conf b{font-size:12.5px; font-weight:500;}
.al-confl{font-size:11.5px; color:var(--text3); white-space:nowrap;}
.al-conf.high .kc-fill{background:var(--red);} .al-conf.high b{color:var(--red);}
.al-conf.mid .kc-fill{background:var(--amber);} .al-conf.mid b{color:var(--amber);}
.al-conf.low .kc-fill{background:var(--m3-outline);} .al-conf.low b{color:var(--m3-on-surface-variant);}
.al-btn{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:var(--r-full);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); font-size:12.5px; font-weight:500;
  color:var(--m3-on-surface-variant); white-space:nowrap;}
.al-btn:hover{background:var(--brand-state-hover); color:var(--m3-primary);}
.al-btn.primary{background:var(--m3-primary); border-color:transparent; color:var(--m3-on-primary);}
.al-btn.primary:hover{background:var(--blue-dark); color:var(--m3-on-primary);}
.al-btn .msi{font-size:15px;}
.al-chev{font-size:20px; color:var(--text3); justify-self:end;}
.al-detail{padding:0 16px 16px 66px; border-top:1px solid var(--m3-surface-3); margin-top:2px; padding-top:14px;}
.al-need{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); margin:0 0 12px;}
.al-prov{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; font-size:12px; color:var(--text3);}
.al-prov span{display:inline-flex; align-items:center; gap:6px;}
.al-prov b{color:var(--m3-on-surface-variant); font-weight:500;}
.al-prov .msi{font-size:14px;}
.al-row:hover .al-title .src-star, .al-row.open .al-title .src-star{display:inline-flex; align-items:center; justify-content:center;}
.al-detailacts{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
@media (max-width:1100px){
  .al-head{display:none;}
  .al-main{grid-template-columns:38px minmax(0,1fr) auto; grid-auto-rows:min-content; row-gap:8px;}
  .al-hrs, .al-bill{grid-column:2; display:inline;}
  .al-conf{grid-column:2;}
  .al-act{grid-column:2;}
  .al-detail{padding-left:16px;}
}

/* Open alerts on a project card */
.alert-flag{display:inline-flex; align-items:center; gap:4px; margin-right:5px; padding:2px 8px;
  border-radius:var(--r-full); background:var(--red-bg); color:var(--red); font-size:11.5px; font-weight:500;}
.alert-flag .msi{font-size:13px;}

/* Billing rates by role */
.rate-hint{font-size:12.5px; line-height:19px; color:var(--text3); margin:-4px 0 16px;}
.rate-table{width:100%; border-collapse:collapse;}
.rate-table th{text-align:left; font-size:11px; font-weight:500; letter-spacing:.045em; text-transform:uppercase;
  color:var(--m3-on-surface-variant); padding:0 8px 10px; border-bottom:1px solid var(--m3-outline-variant);}
.rate-table th.num, .rate-table td.num{text-align:right;}
.rate-table td{padding:6px 8px; border-bottom:1px solid var(--m3-surface-2);}
.rate-table .tm-in{width:100%; padding:9px 12px; border:1px solid var(--m3-outline-variant); background:transparent;
  font-size:13.5px; color:var(--m3-on-surface);}
.rate-table .rate-num{width:110px; text-align:right;}
.rate-cur{font-size:13px; color:var(--text3); margin-right:4px;}

/* The approval email is read before it is sent, so give it room */
.ap-card{width:min(920px, 92vw); max-height:90vh; display:flex; flex-direction:column;}
.ap-card .pmodal-body{flex:1; overflow-y:auto;}
#apBody{min-height:min(46vh, 420px); line-height:1.65; font-size:14px;}
@media (max-width:900px){ .ap-card{width:auto;} #apBody{min-height:40vh;} }

/* Deliverable lifecycle */
.bd-story{font-size:12.5px; line-height:19px; color:var(--m3-primary); background:var(--brand-state-hover);
  border-radius:var(--r-sm); padding:8px 10px; margin:8px 0 10px;}
.bd-card.st-client-review{border-color:var(--amber);}
.bd-card.st-approved{border-color:var(--green);}
.bd-card.st-development{border-color:var(--m3-primary);}
.bd-status.s-in-progress{background:var(--m3-surface-2); border-color:transparent; color:var(--m3-on-surface-variant);}
.bd-status.s-client-review{background:var(--amber-bg); border-color:transparent; color:var(--amber);}
.bd-status.s-approved{background:var(--green-bg); border-color:transparent; color:var(--green);}
.bd-status.s-development{background:var(--m3-primary-container); border-color:transparent; color:var(--m3-on-primary-container);}
.task-row .task-ask{white-space:nowrap;}

/* ============ DELIVERABLES TIMELINE ============ */
.bd-row{border:1px solid var(--m3-outline-variant); border-radius:var(--r-lg); background:var(--m3-surface); margin-bottom:10px;}
.bd-row.st-client-review{border-color:var(--amber);}
.bd-row.st-approved{border-color:var(--green);}
.bd-row.st-development{border-color:var(--m3-primary);}
.bd-row .bd-head{display:flex; align-items:flex-start; gap:14px; padding:14px 18px; cursor:pointer;}
.bd-disc{font-size:19px; color:var(--m3-primary); margin-top:2px; flex-shrink:0;}
.bd-headmain{flex:1; min-width:0;}
.bd-row .bd-title{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; font-weight:500; line-height:22px; color:var(--m3-on-surface);}
.bd-row .bd-story{font-size:12.5px; line-height:19px; color:var(--m3-on-surface-variant); background:transparent; padding:4px 0 0; margin:0;}
.bd-row .bd-size{font-size:11.5px; color:var(--text3); background:var(--m3-surface-2); border-radius:var(--r-full); padding:3px 10px; flex-shrink:0; margin-top:2px;}
.bd-row .bd-status{flex-shrink:0; margin-top:0;}
.bd-row .bd-chev{font-size:20px; color:var(--text3); flex-shrink:0; margin-top:2px;}
.bd-detailwrap{padding:0 18px 16px 51px; border-top:1px solid var(--m3-surface-3); padding-top:14px;}
.bd-acts{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.tgroup-head.static{cursor:default; pointer-events:none;}

/* The UX requirement reads as a document inside the row */
.ux-doc{margin-top:18px; padding:16px 18px; border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface-1);}
.ux-head{display:flex; align-items:center; gap:8px; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14px;
  color:var(--m3-on-surface); margin-bottom:12px;}
.ux-head .msi{font-size:18px; color:var(--m3-primary);}
.ux-jtbd{font-size:13.5px; line-height:21px; color:var(--m3-primary); background:var(--brand-state-hover);
  border-radius:var(--r-sm); padding:10px 12px; margin-bottom:6px;}
.ux-step{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container); font-size:10.5px; font-weight:600;
  flex-shrink:0; margin-top:2px;}
.task-ask.added{color:var(--green); border-color:transparent; background:var(--green-bg); cursor:default;}

/* Ticket tabs, inline and full screen */
.tk-tabs{display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--m3-outline-variant); margin-bottom:16px;}
.tk-tab{position:relative; height:40px; padding:0 16px; border:none; background:transparent; font-size:13.5px;
  font-weight:500; color:var(--m3-on-surface-variant);}
.tk-tab:hover{color:var(--m3-on-surface);}
.tk-tab.on{color:var(--m3-primary);}
.tk-tab.on::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--m3-primary);}
.tk-dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--green); margin-left:6px; vertical-align:middle;}
.tk-full{margin-left:auto; width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:var(--text3); display:inline-flex; align-items:center; justify-content:center;}
.tk-full:hover{background:rgba(127,127,127,.16); color:var(--m3-on-surface);}
.tk-full .msi{font-size:17px;}
.tk-body{min-height:60px;}
.doc-empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 20px;}
.doc-empty .msi{font-size:26px; color:var(--m3-primary); margin-bottom:10px;}
.doc-empty p{font-size:13px; line-height:20px; color:var(--m3-on-surface-variant); max-width:460px; margin-bottom:16px;}

.tk-card{width:min(900px, 94vw); max-height:92vh; display:flex; flex-direction:column;}
.tk-card .tk-head{align-items:flex-start;}
.tk-card .tk-tabs{margin:0 24px 0; border-bottom:1px solid var(--m3-outline-variant);}
.tk-card .pmodal-body{flex:1; overflow-y:auto; padding-top:18px;}
.tk-sub{display:flex; align-items:center; gap:10px; margin-top:8px;}
.tk-disc{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--m3-on-surface-variant);}
.tk-disc .msi{font-size:15px; color:var(--m3-primary);}
.bd-story.big{font-size:14px; line-height:22px; padding:12px 14px; margin-bottom:16px;
  background:var(--brand-state-hover); color:var(--m3-primary); border-radius:var(--r-sm);}
@media (max-width:900px){ .tk-card{width:auto;} }

/* The design brief leads with the problem */
.ux-problem{border-left:3px solid var(--m3-primary); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--m3-surface-1); padding:12px 16px; margin-bottom:12px;
  font-size:13.5px; line-height:21px; color:var(--m3-on-surface);}
.ux-plabel{font-size:11px; text-transform:uppercase; letter-spacing:.045em; font-weight:500;
  color:var(--m3-primary); margin-bottom:6px;}

/* The mockup prompt, ready to copy into a mockup tool */
.mk-block{margin-top:18px; border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); overflow:hidden;}
.mk-head{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--m3-surface-1);
  border-bottom:1px solid var(--m3-outline-variant); font-size:12.5px; font-weight:500; color:var(--m3-on-surface);}
.mk-head .msi{font-size:17px; color:var(--m3-primary);}
.mk-note{font-weight:400; font-size:11.5px; color:var(--text3);}
.mk-copy{margin-left:auto; height:28px; padding:0 12px; font-size:12px;}
.mk-prompt{margin:0; padding:16px 18px; font-family:'Google Sans Text',Roboto,Arial,sans-serif; font-size:13px;
  line-height:21px; color:var(--m3-on-surface-variant); word-break:break-word;
  max-height:520px; overflow-y:auto; background:var(--m3-surface);}
.mk-prompt .cp-p{margin:0 0 10px;}
.mk-prompt .cp-p:last-child{margin-bottom:0;}
.mk-prompt .cp-h{margin:18px 0 7px; font-size:12.5px; font-weight:600; color:var(--m3-on-surface);
  text-transform:uppercase; letter-spacing:.05em;}
.mk-prompt .cp-h:first-child{margin-top:0;}
.mk-prompt .cp-ul{margin:0 0 10px; padding-left:18px;}
.mk-prompt .cp-ul li{margin:0 0 4px;}
.mk-prompt code{font-size:12px; background:var(--m3-surface-2); padding:1px 5px; border-radius:var(--r-xs);}

/* Show or hide a typed password */
.pw-wrap{position:relative;}
.pw-wrap .mfield{padding-right:46px;}
.m3-field.has-reveal .m3-input{padding-right:48px;}
.m3-field.has-reveal:focus-within .m3-input{padding-right:47px;}
.pw-reveal{position:absolute; top:0; right:6px; height:100%; width:38px; display:flex; align-items:center;
  justify-content:center; border:none; background:transparent; color:var(--text3); border-radius:50%;}
.pw-wrap .pw-reveal{height:calc(100% - 12px); top:0;}
.pw-reveal:hover{color:var(--m3-on-surface);}
.pw-reveal.on{color:var(--m3-primary);}
.pw-reveal .msi{font-size:19px;}
.gcard-right .pw-reveal{color:var(--m3-on-surface-variant);}

/* The sign-in page follows the same squircle shape scale as the app */
.gcard{border-radius:var(--r-xl);}
.gcard-right .m3-input{border-radius:var(--r-md);}
.gsep{margin:18px 0;}
@supports (corner-shape: squircle){
  .gcard, .gcard-right .m3-input, .gnext, .gbtn-g{corner-shape:squircle;}
}

/* Connect Google Drive, and the source picker on a new project */
.gc-card{width:min(460px, 92vw); position:relative;}
.gc-close{position:absolute; top:12px; right:12px;}
.gc-body{padding:34px 32px 28px; text-align:center;}
.gc-logo{width:52px; height:52px; margin:0 auto 18px; border-radius:50%; border:1px solid var(--m3-outline-variant);
  display:flex; align-items:center; justify-content:center;}
.gc-logo svg{width:26px; height:26px;}
.gc-body h3{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:20px; font-weight:400; color:var(--m3-on-surface); margin-bottom:8px;}
.gc-body > p{font-size:13.5px; line-height:21px; color:var(--m3-on-surface-variant); margin-bottom:22px;}
.gc-perms{text-align:left; display:flex; flex-direction:column; gap:14px; margin-bottom:26px;}
.gc-perm{display:flex; gap:12px; align-items:flex-start;}
.gc-perm .msi{font-size:19px; color:var(--m3-primary); margin-top:2px;}
.gc-perm b{display:block; font-size:13px; font-weight:500; color:var(--m3-on-surface);}
.gc-perm span{font-size:12px; line-height:18px; color:var(--text3);}
.gc-actions{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.gc-actions .gbtn-g{width:auto; flex:1; justify-content:center;}
.gc-foot{font-size:12px; color:var(--m3-error); margin-top:12px; min-height:14px;}

.np-connect{display:flex; align-items:center; gap:14px; padding:16px; border:1px dashed var(--m3-outline-variant);
  border-radius:var(--r-md); background:var(--m3-surface-1);}
.np-connect > .msi{font-size:24px; color:var(--m3-primary); flex-shrink:0;}
.np-connect b{display:block; font-size:13.5px; color:var(--m3-on-surface);}
.np-connect span{font-size:12px; line-height:18px; color:var(--text3);}
.np-connect .m3-btn{flex-shrink:0; height:36px;}
#npFileList{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}

/* A co-pilot answer can be a written explanation, so give prose room */
.cp-msg .bubble .cp-p { margin: 0 0 10px; line-height: 1.55; }
.cp-msg .bubble .cp-p:last-child { margin-bottom: 0; }
.cp-msg .bubble .cp-h {
  margin: 14px 0 6px; font-size: 13px; font-weight: 600;
  letter-spacing: .01em; color: var(--on-surface);
}
.cp-msg .bubble .cp-h:first-child { margin-top: 0; }
.cp-msg .bubble .cp-ul { margin: 0 0 10px; padding-left: 18px; }
.cp-msg .bubble .cp-ul:last-child { margin-bottom: 0; }
.cp-msg .bubble .cp-ul li { margin: 0 0 4px; line-height: 1.5; }
.cp-msg .bubble code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-xs);
}

/* Pasteable data inside a build brief or a co-pilot answer */
.cp-code{margin:0 0 12px; padding:12px 14px; background:var(--m3-surface-2);
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-sm);
  font-family:'Roboto Mono',ui-monospace,monospace; font-size:11.5px; line-height:17px;
  color:var(--m3-on-surface); overflow-x:auto; white-space:pre;}
.cp-code:last-child{margin-bottom:0;}

/* ============ PHASE PILL ============ */
/* Where the project has got to, above the tab strip. Small on purpose: it is
   orientation, not a control panel. */
.phase-pill{display:inline-flex; align-items:center; gap:2px; margin:0 0 10px; padding:3px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-full); background:var(--m3-surface);}
.php-step{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 12px; border:none;
  background:transparent; border-radius:var(--r-full); font-size:11.5px; font-weight:500; letter-spacing:.02em;
  color:var(--text3); white-space:nowrap; transition:background-color .15s, color .15s;}
.php-step:hover{color:var(--m3-on-surface);}
.php-step.done{color:var(--m3-on-surface-variant);}
.php-step.on{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.php-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45;}
.php-step.on .php-dot{opacity:1;}
.php-tick{font-size:13px; color:var(--green);}
.php-sep{width:10px; height:1px; background:var(--m3-outline-variant); flex-shrink:0;}
@media (max-width:760px){
  .phase-pill{overflow-x:auto; max-width:100%;}
  .php-step{padding:0 9px;}
}

/* ============ REQUIREMENT DOCUMENT ============ */
.bl-seg{margin:0 0 16px;}
.bl-headacts{display:flex; align-items:center; gap:10px;}
.rq-save{font-size:12px; color:var(--text3); min-width:52px; text-align:right;}
.rq-save.rq-saving{color:var(--m3-primary);}
.rq-save.rq-saved{color:var(--green);}
.rq-save.rq-error{color:var(--red);}

/* The document is a page, not a card grid: one column, generous measure, and
   the editing controls stay out of the way until you hover a block. */
.rq-paper{max-width:820px; margin:0 auto; padding:40px 44px 56px; background:var(--m3-surface);
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-md);}
.rq-doclbl{font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text3);}
.rq-title{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:30px; line-height:1.22; font-weight:400;
  color:var(--m3-on-surface); margin:10px 0 8px; outline:none;}
.rq-meta{font-size:12.5px; color:var(--text3); padding-bottom:18px; border-bottom:1px solid var(--m3-surface-3);}
.rq-summary{font-size:15px; line-height:1.65; color:var(--m3-on-surface-variant); margin:18px 0 6px;
  white-space:pre-wrap; outline:none;}

.rq-sec{margin-top:34px;}
.rq-sechead{display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--m3-surface-3);}
.rq-num{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:var(--r-full); background:var(--m3-surface-2); color:var(--m3-on-surface-variant);
  font-size:11.5px; font-weight:500; flex-shrink:0;}
.rq-heading{flex:1; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:19px; font-weight:400;
  line-height:1.3; color:var(--m3-on-surface); outline:none;}
.rq-secempty{font-size:13px; color:var(--text3); padding:12px 0 0 32px;}

.rq-block{position:relative; display:flex; align-items:flex-start; gap:10px; padding:6px 0 6px 32px; border-radius:var(--r-sm);}
.rq-block:hover{background:var(--m3-surface-1);}
.rq-block [contenteditable]{flex:1; outline:none; white-space:pre-wrap;}
.rq-p [contenteditable]{font-size:14.5px; line-height:1.68; color:var(--m3-on-surface);}
.rq-li{align-items:baseline;}
.rq-li [contenteditable]{font-size:14.5px; line-height:1.6; color:var(--m3-on-surface);}
.rq-bullet{width:5px; height:5px; border-radius:50%; background:var(--m3-primary); flex-shrink:0; margin-left:-14px; transform:translateY(-3px);}

/* A requirement is the unit the client signs off, so it gets a card */
.rq-req{display:block; margin:14px 0; padding:14px 16px 12px; border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-md); background:var(--m3-surface-1);}
.rq-req:hover{background:var(--m3-surface-1);}
.rq-reqhead{display:flex; align-items:flex-start; gap:10px;}
.rq-ref{font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--m3-primary); background:var(--brand-state-hover, var(--m3-primary-container)); border-radius:var(--r-full);
  padding:3px 9px; flex-shrink:0; margin-top:2px;}
.rq-reqtitle{flex:1; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px; line-height:1.4;
  color:var(--m3-on-surface); outline:none;}
.rq-reqdetail{font-size:13.5px; line-height:1.65; color:var(--m3-on-surface-variant); margin:8px 0 0;
  white-space:pre-wrap; outline:none;}
.rq-acclbl{display:flex; align-items:center; gap:6px; margin:14px 0 6px; font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text3);}
.rq-acclbl .msi{font-size:14px; color:var(--green);}
.rq-acc{display:flex; align-items:flex-start; gap:9px; padding:3px 0;}
.rq-acc [contenteditable]{flex:1; font-size:13px; line-height:1.55; color:var(--m3-on-surface); outline:none; white-space:pre-wrap;}
.rq-accdot{width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:7px;}
.rq-addacc{display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 10px; border:none;
  background:transparent; border-radius:var(--r-full); font-size:12px; color:var(--m3-primary);}
.rq-addacc:hover{background:var(--brand-state-hover);}
.rq-addacc .msi{font-size:15px;}

/* Placeholder text for an empty editable line */
[contenteditable][data-ph]:empty::before{content:attr(data-ph); color:var(--text3); opacity:.8; pointer-events:none;}

.rq-acts{display:flex; gap:2px; opacity:0; transition:opacity .12s; flex-shrink:0;}
.rq-block:hover .rq-acts, .rq-sechead:hover .rq-acts, .rq-acts:focus-within{opacity:1;}
.rq-acc .rq-act{opacity:0;}
.rq-acc:hover .rq-act{opacity:1;}
.rq-act{width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:none;
  background:transparent; border-radius:50%; color:var(--text3);}
.rq-act:hover{background:rgba(127,127,127,.16); color:var(--m3-on-surface);}
.rq-act.danger:hover{background:var(--red-bg); color:var(--red);}
.rq-act .msi{font-size:16px;}

.rq-addsec{display:inline-flex; align-items:center; gap:6px; margin-top:30px; padding:8px 16px;
  border:1px dashed var(--m3-outline-variant); background:transparent; border-radius:var(--r-full);
  font-size:13px; color:var(--m3-on-surface-variant);}
.rq-addsec:hover{background:var(--m3-surface-1); color:var(--m3-primary); border-color:var(--m3-primary);}
.rq-addsec .msi{font-size:17px;}

.rq-empty{max-width:640px; margin:26px auto; display:flex; flex-direction:column; align-items:center; text-align:center;}
.rq-empty h4{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:17px; font-weight:400; margin:14px 0 8px;}
.rq-empty p{font-size:13.5px; line-height:1.65; color:var(--m3-on-surface-variant); margin-bottom:22px;}
.rq-emptyacts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.rq-writing{max-width:820px; margin:0 auto;}
.rq-wline{display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:8px;}
.rq-writing p{font-size:13px; line-height:1.6; color:var(--m3-on-surface-variant); margin-bottom:18px; max-width:640px;}

@media (max-width:760px){
  .rq-paper{padding:24px 18px 40px; border-radius:var(--r-sm);}
  .rq-title{font-size:24px;}
  .rq-block{padding-left:16px;}
  .rq-acts{opacity:1;}
}

/* One stroke under the topbar, and only one: what read as a second line was the
   docked timeline strip's shadow sitting directly beneath it. */
.rq-failed{display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--red-bg); color:var(--red); font-size:13px; text-align:left;}
.rq-failed .msi{font-size:17px;}

/* ============ WHO IS WHO ============ */
.rm-sub{font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant); margin-top:6px; max-width:460px;}
.rm-legend{display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--m3-on-surface-variant); margin-bottom:12px;}
.rm-legend span{display:inline-flex; align-items:center; gap:6px;}
.rm-dot{width:8px; height:8px; border-radius:50%; background:var(--m3-outline);}
.rm-dot.client{background:var(--m3-primary);}
.rm-dot.field{background:var(--amber);}
.rm-row{display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--m3-surface-3);}
.rm-row.gone{opacity:.4;}
.rm-row.gone .rm-main .t{text-decoration:line-through;}
.rm-main{flex:1; min-width:0;}
.rm-main .t{font-size:13.5px; color:var(--m3-on-surface);}
.rm-main .s{font-size:11.5px; color:var(--text3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rm-seg{display:flex; border:1px solid var(--m3-outline-variant); border-radius:var(--r-full); overflow:hidden; flex-shrink:0;}
.rm-segbtn{border:none; background:transparent; padding:5px 14px; font-size:12px; font-weight:500; color:var(--text3);}
.rm-segbtn.on{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.rm-add{display:flex; align-items:center; gap:8px; margin-top:16px;}
.rm-add .mfield{flex:1; margin:0;}

/* App tooltip. The browser's own is a dark shadowed box that belongs to no
   design; this one is a 1px stroke on surface, like every other panel here. */
.tipbox{position:fixed; z-index:200; max-width:340px; padding:9px 12px; border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-sm); background:var(--m3-surface); color:var(--m3-on-surface); box-shadow:none;
  font-size:12px; line-height:1.55; pointer-events:none; opacity:0; transition:opacity .12s;}
.tipbox.show{opacity:1;}

/* Lock state, stated at the top of the Baseline tab */
.bl-lock{display:flex; align-items:flex-start; gap:14px; padding:16px 18px; margin-bottom:16px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface);}
.bl-lock.open{border-color:var(--m3-outline-variant);}
.bl-lock.changed{border-color:var(--amber); background:color-mix(in srgb, var(--amber-bg) 22%, transparent);}
.bl-lock.locked{border-color:var(--green); background:color-mix(in srgb, var(--green-bg) 18%, transparent);}
.bl-lockic{font-size:22px; color:var(--m3-on-surface-variant); margin-top:1px; flex-shrink:0;}
.bl-lock.changed .bl-lockic{color:var(--amber);}
.bl-lock.locked .bl-lockic{color:var(--green);}
.bl-lockmain{flex:1; min-width:0;}
.bl-lockmain .t{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14.5px; color:var(--m3-on-surface);}
.bl-lockmain .s{font-size:12.5px; line-height:1.6; color:var(--m3-on-surface-variant); margin-top:5px; max-width:640px;}
.bl-lock .m3-btn{flex-shrink:0;}
@media (max-width:760px){ .bl-lock{flex-wrap:wrap;} .bl-lock .m3-btn{width:100%;} }

/* Alerts lives outside the stages, on the right of the bar */
.ptabs-right{order:3; margin-left:auto; display:flex; align-items:center; padding-left:14px; margin-bottom:-1px; flex-shrink:0;}
.ptabs-right::before{content:""; width:1px; height:22px; background:var(--m3-outline-variant); margin-right:12px;}
.tabrow .ptabs-right .ptab{padding:12px 14px; white-space:nowrap;}
.alert-tab .msi{color:var(--amber);}
.alert-tab.active .msi{color:var(--m3-primary);}
/* The stage the project is actually in keeps its mark even while you browse another */
.php-step.here .php-dot{background:var(--m3-primary); opacity:1;}
.php-step.here:not(.on){color:var(--m3-on-surface);}

/* A usecase, written as a ticket Planning can work from */
.uc-ticket{border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface);
  padding:14px 16px 12px; margin-bottom:10px;}
.uc-ticket:hover{background:var(--m3-surface-1);}
.uc-head{display:flex; align-items:flex-start; gap:10px;}
.uc-ref{font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--m3-primary); background:var(--m3-primary-container); border-radius:var(--r-full); padding:3px 9px;
  flex-shrink:0; margin-top:1px;}
.uc-title{flex:1; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14.5px; line-height:1.4; color:var(--m3-on-surface);}
.uc-story{font-size:13px; line-height:1.6; color:var(--m3-on-surface-variant); margin:8px 0 0 0;}
.uc-foot{display:flex; align-items:center; gap:10px; margin-top:11px;}
.uc-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--m3-on-surface-variant);
  background:var(--m3-surface-2); border-radius:var(--r-full); padding:3px 10px;}
.uc-chip .msi{font-size:14px;}
.uc-src{font-size:11.5px; color:var(--text3);}
.uc-ticket .tp-del{flex-shrink:0;}

/* The timeline strip is docked under the topbar, not floating over anything,
   so it takes a stroke like the rest of the product and never a shadow. Closed,
   it paints nothing at all. */
.tl-panel{box-shadow:none; border-radius:0; border-width:0 0 1px; border-bottom-color:transparent;}
.tl-panel.open{border-bottom-color:var(--m3-outline-variant);}
/* The first stage heading in the menu needs no rule above it */
.tabmenu-head:first-child{border-top:none; margin-top:0; padding-top:6px;}
.tabmenu-item .check{margin-left:auto; font-size:18px; color:var(--text3);}
.tabmenu-item.pinned .check{color:var(--m3-primary);}

/* Tabs sit in one flat row */
.tabrow .ptabs{align-items:center; gap:2px; padding-top:0;}
.tabrow .ptab{flex-shrink:0;}






/* ============ SCOPE TICKETS: EPICS AND STORIES ============ */
.epic{margin-bottom:26px;}
.epic-head{display:flex; align-items:flex-start; gap:12px; padding:0 2px 10px; border-bottom:1px solid var(--m3-surface-3); margin-bottom:12px;}
.epic-key{font-family:'Roboto Mono',ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.04em;
  color:var(--m3-on-primary-container); background:var(--m3-primary-container); border-radius:var(--r-full);
  padding:4px 10px; flex-shrink:0; margin-top:1px;}
.epic-main{flex:1; min-width:0;}
.epic-name{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:16px; color:var(--m3-on-surface);}
.epic-goal{font-size:12.5px; line-height:1.55; color:var(--m3-on-surface-variant); margin-top:4px; max-width:720px;}
.epic-stat{font-size:11.5px; color:var(--text3); white-space:nowrap; margin-top:4px;}
.epic.loose .epic-key{background:var(--m3-surface-3); color:var(--m3-on-surface-variant);}
.uc-head{cursor:pointer;}
.uc-points{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px;
  border-radius:var(--r-full); background:var(--m3-surface-2); color:var(--m3-on-surface-variant); font-size:11px; font-weight:500;}
.uc-prio{display:inline-flex; align-items:center;}
.uc-prio .msi{font-size:17px;}
.uc-prio.p-highest .msi, .uc-prio.p-high .msi{color:var(--red);}
.uc-prio.p-medium .msi{color:var(--amber);}
.uc-prio.p-low .msi{color:var(--text3);}
.uc-teaser{font-size:12.5px; color:var(--text3); margin-top:6px;}
.uc-body{margin-top:14px; padding-top:12px; border-top:1px solid var(--m3-surface-3);}
.uc-acclbl{display:flex; align-items:center; gap:6px; margin:12px 0 6px; font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text3);}
.uc-acclbl .msi{font-size:14px; color:var(--green);}
.uc-acc{display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.55; color:var(--m3-on-surface); padding:3px 0;}
.uc-accdot{width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:7px;}
.uc-ticket.open{border-color:var(--m3-primary);}
.epic-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px;}
.epic-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--m3-on-surface-variant);
  background:var(--m3-surface-2); border-radius:var(--r-full); padding:3px 10px;}
.epic-chip .msi{font-size:14px;}
.epic-chip.bad{background:var(--red-bg); color:var(--red);}
.epic-head .al-btn{flex-shrink:0; margin-top:2px;}
.epic-empty{font-size:12.5px; line-height:1.6; color:var(--text3); padding:6px 2px 4px; max-width:640px;}
.bl-add{white-space:nowrap;}
.bl-done{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--green); white-space:nowrap;}
.bl-done .msi{font-size:15px;}
.bl-row .bl-acts{gap:6px; align-items:center;}
/* Taking a scope line into delivery is a primary move, so it does not hide
   behind a hover; the edit affordances still do. */
.bl-acts{display:flex;}
.bl-acts .bl-act{display:none;}
.bl-row:hover .bl-acts .bl-act{display:inline-flex;}

/* ============ INTRO WIZARD ============ */
/* Three steps because the product is three moves: gather, agree, watch. */
.intro-card{width:min(520px, 92vw); padding:0; overflow:hidden;}
.intro-art{height:150px; display:flex; align-items:center; justify-content:center;
  background:var(--m3-surface-1); border-bottom:1px solid var(--m3-outline-variant);}
.intro-art{overflow:hidden; padding:0;}
.intro-art img{width:100%; height:100%; object-fit:cover; display:block;}
.intro-body{padding:24px 28px 8px;}
.intro-step{font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:10px;}
.intro-body h3{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:20px; line-height:1.3; font-weight:400;
  color:var(--m3-on-surface); margin-bottom:10px;}
.intro-body p{font-size:13.5px; line-height:1.65; color:var(--m3-on-surface-variant);}
.intro-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 28px 24px;}
.intro-dots{display:flex; align-items:center; gap:8px;}
.intro-dot{width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--m3-outline-variant); transition:width .18s, background-color .18s;}
.intro-dot.on{width:22px; border-radius:var(--r-full); background:var(--m3-primary);}
.intro-acts{display:flex; align-items:center; gap:8px;}

/* Onboarding step one reads as a 2x2: name and industry, then country and team size */
.ob-card{max-width:720px;}
.ob-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; align-items:start;}
.ob-grid .m3-field{margin-bottom:16px;}
.ob-cell{padding-top:2px;}
.ob-cell .m3-group-lbl{margin-top:0;}
/* The onboarding logo had no size of its own, so the flag filled the card */
.ob-brand .flag-icon{width:24px; height:24px; background:var(--brand-solid); border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
@media (max-width:640px){ .ob-grid{grid-template-columns:1fr;} }

/* "Improves AI": marks the inputs Oumi actually reads, so it is clear which
   effort pays off. On the form where the whole form feeds it, on the field
   where only that field does. */
.ai-badge{display:inline-flex; align-items:center; gap:5px; margin-left:10px; padding:3px 10px;
  border-radius:var(--r-full); background:var(--m3-primary-container); color:var(--m3-on-primary-container);
  font-family:'Google Sans Text','Roboto',Arial,sans-serif; font-size:11px; font-weight:500; letter-spacing:.02em;
  vertical-align:middle; white-space:nowrap; cursor:default;}
.ai-badge .msi{font-size:13px;}
.pf-sechead{display:flex; align-items:center; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:15px;
  color:var(--m3-on-surface); margin-bottom:14px;}
.m3-headline .ai-badge{vertical-align:6px;}
/* One workspace rate, not a table of roles */
.rate-one{max-width:260px; margin-top:6px;}
/* A call row only reads as an accordion once it has a summary behind it */
.tl-card{cursor:default;}
.tl-card:has(.chev){cursor:pointer;}
/* Roster: rename, retitle, or fold two spellings of one person together */
.rm-acts{display:flex; align-items:center; gap:2px; flex-shrink:0;}
.rm-act{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:none;
  background:transparent; border-radius:50%; color:var(--text3);}
.rm-act:hover{background:rgba(127,127,127,.16); color:var(--m3-on-surface);}
.rm-act .msi{font-size:17px;}
.rm-row.editing{align-items:flex-start;}
.rm-edit{display:flex; flex-direction:column; gap:8px;}
.rm-edit .mfield{margin:0;}
.rm-mergerow{display:flex; align-items:center; gap:10px; padding:10px 4px 12px 46px; font-size:12.5px;
  color:var(--m3-on-surface-variant); border-bottom:1px solid var(--m3-surface-3);}
.rm-mergerow .msi{font-size:16px; color:var(--m3-primary);}
.rm-mergerow .mfield{margin:0; flex:1; max-width:220px;}

/* A to do item read on its own page: the list steps aside, the co-pilot stays */
/* The item page uses the panel it is given */
.tk-page{max-width:none;}
/* The item's own title is the page title, with the way back beside it */
.tk-back{width:36px; height:36px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; border-radius:50%; color:var(--m3-on-surface-variant); margin-top:1px;}
.tk-back:hover{background:rgba(127,127,127,.14); color:var(--m3-on-surface);}
.tk-back .msi{font-size:20px;}
.tk-pagehead{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px;}
.tk-pagehead h2{flex:1; min-width:0; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:24px;
  line-height:1.25; font-weight:400; color:var(--m3-on-surface); padding-top:4px;}
.tk-pagehead .bd-size, .tk-pagehead .bd-status{margin-top:7px; flex-shrink:0;}

.tk-page .tk-body{padding-top:6px;}
.tk-page .bd-acts{margin-top:26px;}
.bd-row .bd-chev{opacity:.5;}
.bd-row:hover .bd-chev{opacity:1;}

/* The expand icon means full screen: the ticket takes the whole window */
.tk-card{width:96vw; max-width:none; height:94vh; max-height:none; border-radius:var(--r-lg);}
.tk-card .pmodal-body{padding-left:32px; padding-right:32px;}
.tk-card .tk-tabs{margin:0 32px;}
.tk-card .tk-head{padding-left:32px; padding-right:32px;}
.tk-card .tk-body{max-width:none;}
@media (max-width:900px){ .tk-card{width:100vw; height:100vh; border-radius:0;} }
/* Ticket text edits in place */
[data-edid]{outline:none; border-radius:var(--r-xs, 6px);}
[data-edid]:hover{background:rgba(127,127,127,.07);}
[data-edid]:focus{background:rgba(127,127,127,.10); box-shadow:inset 0 0 0 1px var(--m3-outline-variant);}
[data-edid][data-ph]:empty::before{content:attr(data-ph); color:var(--text3);}
.ed-add{display:inline-flex; align-items:center; gap:5px; margin:6px 0 4px; padding:4px 10px; border:none;
  background:transparent; border-radius:var(--r-full); font-size:12px; color:var(--m3-primary);}
.ed-add:hover{background:var(--brand-state-hover);}
.ed-add .msi{font-size:15px;}

/* ============ CALL SUMMARY: THREE SECTIONS, ONE COLUMN ============ */
/* Discussed, What's next and Asks share a left edge and a rule between them,
   so the accordion reads as three blocks rather than drifting indents. */
.tl-body{--sum-gutter:26px;}
.tl-body .tl-lbl{display:flex; align-items:center; gap:8px; height:auto; padding:0; margin:0 0 10px;
  border:none; border-radius:0; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text3);}
.tl-body .tl-lbl .msi{font-size:16px; color:var(--m3-primary); width:18px; text-align:center;}
.tl-body .tl-lbl + *{margin-top:0;}
/* Every section after the first gets space and a hairline above it */
.tl-body .tl-lbl:not(:first-child){margin-top:22px; padding-top:18px; border-top:1px solid var(--m3-surface-3);}
.tl-body .call-sum-text{margin:0 0 2px; padding-left:var(--sum-gutter);}
.tl-body .tl-bullet{gap:10px; padding:4px 0 4px var(--sum-gutter); align-items:flex-start;}
.tl-body .tl-bullet .msi{width:18px; text-align:center; flex-shrink:0;}
.tl-body .tl-btxt{-webkit-line-clamp:unset; display:block; line-height:1.55;}

/* The co-pilot with nothing in it yet. A blank column with a text box under
   it says nothing about what the thing is for, so it says so itself. */
.cp-empty{min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:24px 18px; text-align:center;}
.cp-empty-mark{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.cp-empty-mark .msi{font-size:26px;}
.cp-empty-lead{font-family:'Google Sans',Roboto,sans-serif; font-size:16px; color:var(--m3-on-surface); margin-bottom:14px;}
.cp-empty-list{display:flex; flex-direction:column; gap:8px; width:100%; max-width:320px;}
.cp-opener{display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; border-radius:var(--r-md);
  border:1px solid var(--m3-outline-variant); background:transparent; color:var(--m3-on-surface);
  font:inherit; font-size:12.5px; line-height:1.4; text-align:left; cursor:pointer; transition:background .15s, border-color .15s;}
.cp-opener:hover{background:var(--m3-surface-1); border-color:var(--m3-outline);}
.cp-opener > .msi{font-size:17px; color:var(--m3-primary); flex-shrink:0;}
/* The question, and the requirement it is about underneath it */
.cpo-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.cpo-txt i{font-style:normal; font-size:11.5px; line-height:1.4; color:var(--text3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cp-opener .go{font-size:16px; color:var(--text3); opacity:0; transition:opacity .15s;}
.cp-opener:hover .go{opacity:1;}
.cp-empty-foot{margin-top:16px; font-size:11.5px; line-height:1.5; color:var(--text3); max-width:300px;}

/* How many requirements a call added, on its group header in Requirements.
   A button rather than a badge, because it opens the alert for that call. */
.tg-new{display:inline-flex; align-items:center; gap:5px; margin-left:auto; height:26px; padding:0 11px; border-radius:100px;
  border:none; background:var(--m3-primary-container); color:var(--m3-on-primary-container);
  font-family:'Google Sans Text',Roboto,sans-serif; font-size:11.5px; font-weight:500; cursor:pointer; flex-shrink:0;}
.tg-new:hover{filter:brightness(1.06);}
.tg-new .msi{font-size:14px;}

/* What a call added, on its header so it reads whether the call is open or
   shut. The requirements themselves have their own tab, so the call carries
   the size of what it did rather than a copy of the list. */
.ct-chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:100px;
  background:var(--m3-primary-container); color:var(--m3-on-primary-container);
  font-size:11.5px; font-weight:500; white-space:nowrap; flex-shrink:0;}
.ct-chip .msi{font-size:14px;}

/* The body needs air under the call title before the first section */
.tl-card.open .tl-body{margin-top:18px;}
/* The Drive picker leads with what Oumi already found for this project */
.gm-group{margin-bottom:6px;}
.gm-grouphead{display:flex; align-items:center; gap:8px; margin:4px 0 10px; font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text3);}
.gm-grouphead .msi{font-size:15px; color:var(--m3-primary);}
.gm-grouphead.sub{margin-top:18px; padding-top:14px; border-top:1px solid var(--m3-surface-3);}
.gm-why{font-size:11.5px; color:var(--text3); margin:-6px 0 10px 46px;}

/* ============ TASKS: WHAT EACH CALL LEFT SOMEONE TO DO ============ */
.act-group{margin-bottom:22px;}
.act-row{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-md); background:var(--m3-surface); margin-bottom:8px;}
.act-row:hover{background:var(--m3-surface-1);}
.act-row.done{opacity:.55;}
.act-row.done .act-text{text-decoration:line-through;}
.act-check{width:30px; height:30px; flex-shrink:0; border:none; background:transparent; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--text3);}
.act-check:hover{background:rgba(127,127,127,.14);}
.act-row.done .act-check{color:var(--green);}
.act-check .msi{font-size:20px;}
.act-side{flex-shrink:0; font-size:10.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-full); background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.act-side.us{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.act-side.client{background:var(--green-bg); color:var(--green);}
.act-text{flex:1; min-width:0; font-size:13.5px; line-height:1.5; color:var(--m3-on-surface);}
.act-assign{flex-shrink:0; max-width:190px; height:34px; padding:0 10px; border-radius:var(--r-sm);
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface); color:var(--text3);
  font-family:inherit; font-size:12.5px;}
.act-assign.set{color:var(--m3-on-surface); border-color:var(--m3-outline);}
.act-count{font-size:12.5px; color:var(--m3-on-surface-variant);}
@media (max-width:760px){ .act-row{flex-wrap:wrap;} .act-text{flex-basis:100%; order:3;} }
/* Handovers lead; what a side does on its own sits under a quiet divider */
.act-sub{font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text3);
  margin:14px 0 8px 42px;}
.act-side.handover{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.act-side.client.handover{background:var(--green-bg); color:var(--green);}
/* Fixed columns: the chip and the assignee hold their width, so the task text
   starts and the picker ends on the same line down the whole list. */
.act-side{width:104px; flex-shrink:0; text-align:center; justify-content:center; display:inline-flex;
  align-items:center; height:22px; padding:0 8px;}
.act-assign{width:170px; max-width:170px; flex-shrink:0;}
.act-sub{margin-left:54px;}

/* ============ ASKS: THE WHOLE BACKLOG, AND WHERE EACH ONE WENT ============ */
.ask-row{display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface);}
.ask-row:hover{background:var(--m3-surface-1);}
.ask-row .task-main{flex:1; min-width:0;}
.ask-row .task-main .t{font-size:13.5px; line-height:1.5; color:var(--m3-on-surface);}
.ask-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:5px; font-size:11.5px; color:var(--text3);}
.ask-meta span{display:inline-flex; align-items:center; gap:5px;}
.ask-meta .msi{font-size:14px;}
.ask-place{display:inline-flex; align-items:center; gap:6px; flex-shrink:0; width:190px; height:26px; padding:0 12px;
  border-radius:var(--r-full); font-size:11.5px; font-weight:500; background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.ask-place .msi{font-size:15px;}
.ask-place.todo{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.ask-place.baseline{background:var(--green-bg); color:var(--green);}
.ask-place.alert{background:var(--amber-bg); color:var(--amber);}
.ask-place.closed{opacity:.75;}
@media (max-width:900px){ .ask-place{width:auto;} }

/* ============ FEATURES ASKED FOR ============ */
.feat-summary{font-size:13.5px; line-height:1.6; color:var(--m3-on-surface-variant); margin:0 0 14px;}
.feat-summary b{color:var(--m3-on-surface); font-weight:500;}
/* The ask reads first and acts second: the text takes the full width, the
   actions sit under it on one line. */
/* An ask is a headline you can read down a list of, and opens when you want
   the rest of it. Eighty of these each carrying a paragraph, an assumptions
   block, a quote and a row of buttons was not a list anyone could scan. */
.feat-row{display:flex; flex-direction:column; margin-bottom:8px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); background:var(--m3-surface);}
.feat-row:hover{background:var(--m3-surface-1);}
.feat-row.open{background:var(--m3-surface-1);}

/* The header is the title and nothing else. Everything the card carried stays
   in the card, unchanged, and appears when you open it. */
.feat-head{display:flex; align-items:flex-start; gap:12px; width:100%; padding:14px 16px; border:none; background:transparent;
  text-align:left; cursor:pointer; font:inherit; border-radius:var(--r-md);}
.feat-chev{font-size:19px; color:var(--m3-on-surface-variant); flex-shrink:0; margin-left:auto;}
.feat-head .feat-title{flex:1; min-width:0;}

.feat-row:not(.open) .feat-body{display:none;}
.feat-body{padding:0 16px 14px;}
.feat-star{margin-bottom:2px;}
.feat-star:empty{display:none;}

.feat-main{min-width:0;}
.feat-title{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14.5px; line-height:1.4; color:var(--m3-on-surface);}
.feat-need{font-size:12.5px; line-height:1.55; color:var(--m3-on-surface-variant); margin-top:6px;}
.feat-foot{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--m3-outline-variant);}
/* Who asked and how big it is stays on the left; everything you can do sits right */
.feat-foot .ask-meta{margin:0; margin-right:auto;}
.feat-foot .ask-place{width:auto;}
/* A gauge with no figure yet still holds its place */
.gaugecard.empty{opacity:.75;}
.og-empty{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text3); margin:8px 0 4px;}
.og-empty .msi{font-size:18px;}
.act-repeat{display:inline-flex; align-items:center; gap:3px; margin-left:8px; padding:1px 7px; border-radius:var(--r-full);
  background:var(--m3-surface-2); color:var(--text3); font-size:11px; vertical-align:1px;}
.act-repeat .msi{font-size:13px;}
/* Tabs can be dragged into the order you want */
.ptab{cursor:pointer; user-select:none;}
.ptab.dragging{opacity:.45;}
.ptab.drop-before{box-shadow:inset 2px 0 0 var(--m3-primary);}
.ptab.drop-after{box-shadow:inset -2px 0 0 var(--m3-primary);}
.bare-item{border:1px dashed var(--m3-outline-variant); border-radius:var(--r-md); margin-bottom:16px;}

/* ---------- open questions: what discovery has not settled ---------- */
.qs-group { margin-bottom: 22px; }
.qs-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--m3-outline-variant); border-radius: var(--r-md);
  background: var(--m3-surface);
}
.qs-card.answered { opacity: .6; }
.qs-card.answered .qs-q { text-decoration: line-through; text-decoration-color: var(--m3-outline); }
.qs-main { flex: 1; min-width: 0; }
.qs-q { font-size: 14px; font-weight: 500; color: var(--m3-on-surface); line-height: 1.5; }
.qs-why { font-size: 13px; color: var(--m3-on-surface-variant); line-height: 1.55; margin-top: 6px; }
.qs-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--m3-outline); margin-top: 10px;
}
.qs-meta .msi { font-size: 15px; }
.qs-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ---------- the centre of the project, and ranking against it ---------- */
.ctr-band{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px; margin-bottom:16px;
  border:1px solid var(--m3-outline-variant); border-left:3px solid var(--m3-primary);
  border-radius:var(--r-md); background:var(--m3-surface-1);
}
.ctr-band > .msi{font-size:20px; color:var(--m3-primary); margin-top:1px;}
.ctr-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.ctr-lbl{font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--m3-primary);}
.ctr-main b{font-family:'Google Sans',Roboto,sans-serif; font-size:15px; font-weight:500; line-height:1.4; color:var(--m3-on-surface);}
.ctr-why{font-size:12.5px; line-height:1.55; color:var(--m3-on-surface-variant);}
.ctr-redo{flex-shrink:0;}
.ctr-band.working{align-items:center;}
.ctr-band.working div{display:flex; flex-direction:column; gap:3px;}
.ctr-band.working b{font-size:14px;}
.ctr-band.working span{font-size:12.5px; color:var(--m3-on-surface-variant);}
.rel-sort{display:flex; gap:8px; margin:0 0 14px;}
.rel-sort .bd-filter .msi{font-size:15px; margin-right:5px;}
.rel-why{
  display:flex; align-items:flex-start; gap:6px; margin-top:8px;
  font-size:12px; line-height:1.5; color:var(--m3-primary);
}
.rel-why .msi{font-size:14px; margin-top:1px; flex-shrink:0;}
.pain-card .rel-why{margin:8px 0 0;}
@keyframes spin{to{transform:rotate(360deg);}}
.msi.spin{animation:spin 1.1s linear infinite; display:inline-block;}

/* ---------- release boundary: what a launch actually needs ---------- */
.ldg{display:flex; gap:12px; margin:0 0 16px; flex-wrap:wrap;}
.ldg-cell{
  flex:1; min-width:240px; display:flex; flex-direction:column; gap:4px;
  padding:14px 16px; border:1px solid var(--m3-outline-variant); border-radius:var(--r-md);
  background:var(--m3-surface);
}
.ldg-cell.on{border-color:var(--m3-primary); background:var(--m3-surface-1);}
.ldg-lbl{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--m3-on-surface-variant);}
.ldg-cell.on .ldg-lbl{color:var(--m3-primary);}
.ldg-lbl .msi{font-size:15px;}
.ldg-cell b{font-family:'Google Sans',Roboto,sans-serif; font-size:15px; font-weight:500; color:var(--m3-on-surface);}
.ldg-sub{font-size:12px; color:var(--m3-on-surface-variant);}
.bnd{display:inline-flex; align-items:center; gap:5px; flex-shrink:0; height:26px; padding:0 11px;
  border-radius:var(--r-full); font-size:11.5px; font-weight:500;
  background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.bnd .msi{font-size:15px;}
.bnd.req{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.bnd.ext{background:var(--m3-surface-2); color:var(--m3-on-surface-variant);}
.bnd.adj{background:transparent; border:1px solid var(--m3-outline-variant); color:var(--text3);}

/* ---------- what our own side answered ---------- */
.cmt{display:flex; gap:8px; align-items:flex-start; margin-top:10px; padding:9px 12px;
  border-radius:var(--r-sm); background:var(--m3-surface-2); font-size:12px; line-height:1.5;}
.cmt > .msi{font-size:16px; margin-top:1px; flex-shrink:0; color:var(--m3-on-surface-variant);}
.cmt b{display:block; font-weight:500; color:var(--m3-on-surface); margin-bottom:2px;}
.cmt-q{display:block; color:var(--m3-on-surface-variant); font-style:italic;}
.cmt-src{display:block; margin-top:3px; font-size:11px; color:var(--text3);}
.cmt.ok{background:var(--green-bg);} .cmt.ok > .msi, .cmt.ok b{color:var(--green);}
.cmt.wait{background:var(--amber-bg);} .cmt.wait > .msi, .cmt.wait b{color:var(--amber);}
.cmt.no > .msi, .cmt.no b{color:var(--red);}
.ldg-cell.ok{border-color:var(--green);}
.ldg-cell.ok .ldg-lbl{color:var(--green);}

/* ---------- loose ends ---------- */
.gp-lead{font-size:13px; line-height:1.6; color:var(--m3-on-surface-variant); margin:0 0 18px; max-width:820px;}
.gp-block{border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); margin-bottom:16px; overflow:hidden;}
.gp-block.bad{border-color:var(--red);}
.gp-block.warn{border-color:var(--amber);}
.gp-block.ok{border-color:var(--m3-outline-variant);}
.gp-head{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--m3-surface-1);
  border-bottom:1px solid var(--m3-outline-variant);}
.gp-head > .msi{font-size:20px; flex-shrink:0;}
.gp-block.bad .gp-head > .msi{color:var(--red);}
.gp-block.warn .gp-head > .msi{color:var(--amber);}
.gp-block.ok .gp-head > .msi{color:var(--green);}
.gp-head div{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.gp-head b{font-family:'Google Sans',Roboto,sans-serif; font-size:14.5px; font-weight:500; color:var(--m3-on-surface);}
.gp-head span{font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant);}
.gp-count{flex-shrink:0; align-self:flex-start; padding:3px 10px; border-radius:var(--r-full);
  background:var(--m3-surface-2); font-size:12px; font-weight:500; color:var(--m3-on-surface-variant);}
.gp-row{display:flex; align-items:flex-start; gap:14px; padding:13px 16px; border-top:1px solid var(--m3-outline-variant);}
.gp-row:first-of-type{border-top:none;}
.gp-main{flex:1; min-width:0;}
.gp-title{font-size:14px; line-height:1.45; color:var(--m3-on-surface);}
.gp-why{font-size:12px; line-height:1.5; color:var(--m3-primary); margin-top:5px;}
.gp-quote{font-size:12px; line-height:1.5; color:var(--m3-on-surface-variant); font-style:italic; margin-top:6px;}
.gp-h{flex-shrink:0; font-size:12.5px; color:var(--text3); padding-top:1px;}
.gp-clear{display:flex; gap:12px; align-items:center; padding:18px; border:1px solid var(--m3-outline-variant);
  border-radius:var(--r-md); background:var(--m3-surface-1);}
.gp-clear .msi{font-size:22px; color:var(--green);}
.gp-clear div{display:flex; flex-direction:column; gap:3px;}
.gp-clear b{font-size:14.5px; color:var(--m3-on-surface);}
.gp-clear span{font-size:12.5px; color:var(--m3-on-surface-variant);}

/* ---------- scope: phases the human draws ---------- */
.ph-card{border:1px solid var(--m3-outline-variant); border-radius:var(--r-md); margin-bottom:16px; overflow:hidden;}
.ph-card.locked{border-color:var(--green);}
.ph-head{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--m3-surface-1);}
.ph-ic{font-size:20px; color:var(--m3-on-surface-variant); flex-shrink:0;}
.ph-card.locked .ph-ic{color:var(--green);}
.ph-name{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ph-name b{font-family:'Google Sans',Roboto,sans-serif; font-size:15px; font-weight:500; color:var(--m3-on-surface); outline:none;}
.ph-name span{font-size:12.5px; color:var(--m3-on-surface-variant); outline:none;}
.ph-name span:empty::before{content:attr(data-ph); color:var(--text3);}
.ph-stat{flex-shrink:0; font-size:12.5px; color:var(--m3-on-surface-variant);}
.ph-badge{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--r-full);
  background:var(--green-bg); color:var(--green); font-size:11.5px; font-weight:500; flex-shrink:0;}
.ph-badge .msi{font-size:15px;}
.ph-list{border-top:1px solid var(--m3-outline-variant);}
.ph-row{display:flex; align-items:flex-start; gap:10px; padding:11px 16px; border-top:1px solid var(--m3-outline-variant);}
.ph-row:first-child{border-top:none;}
.ph-row > .msi{font-size:17px; color:var(--text3); margin-top:1px;}
.ph-rmain{flex:1; min-width:0;}
.ph-rt{font-size:13.5px; line-height:1.45; color:var(--m3-on-surface);}
.ph-rw{font-size:12px; line-height:1.5; color:var(--m3-primary); margin-top:4px;}
.ph-empty{padding:14px 16px; font-size:13px; color:var(--text3); border-top:1px solid var(--m3-outline-variant);}
.ph-backlog{display:flex; gap:12px; align-items:center; padding:16px; border:1px dashed var(--m3-outline-variant);
  border-radius:var(--r-md); background:var(--m3-surface);}
.ph-backlog .msi{font-size:20px; color:var(--m3-on-surface-variant);}
.ph-backlog div{display:flex; flex-direction:column; gap:2px;}
.ph-backlog b{font-size:14px; color:var(--m3-on-surface);}
.ph-backlog span{font-size:12.5px; color:var(--m3-on-surface-variant);}
.pk{border-top:1px solid var(--m3-outline-variant); background:var(--m3-surface-1); padding-bottom:8px;}
.pk-sec{display:flex; align-items:flex-start; gap:12px; padding:14px 16px 8px;}
.pk-lbl{flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--m3-on-surface);}
.pk-lbl .msi{font-size:17px; color:var(--m3-primary);}
.pk-sub{flex-basis:100%; font-weight:400; font-size:12px; color:var(--m3-on-surface-variant);}
.pk-row{display:flex; align-items:flex-start; gap:11px; padding:9px 16px; cursor:pointer;}
.pk-row:hover{background:var(--m3-surface-2);}
.pk-row input{margin-top:3px; width:16px; height:16px; accent-color:var(--m3-primary); cursor:pointer;}
.pk-main{flex:1; min-width:0;}
.pk-t{font-size:13.5px; line-height:1.45; color:var(--m3-on-surface);}
.pk-meta{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:6px;}
.task-ask.in-phase{color:var(--m3-on-primary-container); background:var(--m3-primary-container); border-color:transparent;}
.task-ask.in-phase.fixed{color:var(--green); background:var(--green-bg); cursor:default;}
.ph-pickwrap{position:relative; display:inline-flex;}
.ph-menu{display:none; position:absolute; top:calc(100% + 5px); right:0; z-index:40; min-width:150px; padding:5px;
  border:1px solid var(--m3-outline-variant); border-radius:var(--r-sm); background:var(--m3-surface);
  box-shadow:0 6px 20px rgba(0,0,0,.18);}
.ph-menu.show{display:block;}
/* The copy that lives on the body, pinned to the button it belongs to */
.ph-menu.floating{position:fixed; top:0; left:0; right:auto; z-index:1200;}
.ph-menu button{display:block; width:100%; text-align:left; padding:7px 10px; border:none; background:transparent;
  color:var(--m3-on-surface); font-size:12.5px; border-radius:6px; cursor:pointer;}
.ph-menu button:hover{background:var(--m3-surface-2);}
.task-ask .msi.caret{font-size:16px; margin-left:-1px; opacity:.7;}
.ph-menu-rule{display:block; height:1px; margin:5px 4px; background:var(--m3-outline-variant);}
.ph-menu button{display:flex; align-items:center; gap:8px;}
.ph-menu button .msi{font-size:16px; color:var(--m3-on-surface-variant);}
.ph-menu button.mk{color:var(--m3-primary);}
.ph-menu button.mk .msi{color:var(--m3-primary);}
.ph-inline{border:none; background:transparent; color:var(--m3-primary); font-size:13px; cursor:pointer;
  padding:0; font-family:inherit; text-decoration:underline; text-underline-offset:2px;}
.ph-name b:hover, .ph-name span:hover{background:var(--m3-surface-2); border-radius:4px;}
.ph-name b:focus, .ph-name span:focus{background:var(--m3-surface-2); border-radius:4px; box-shadow:0 0 0 2px var(--m3-primary);}
.ph-save{display:none; font-size:11px; color:var(--text3); margin-top:2px;}
.ph-save.show{display:block;}
.ph-save.saved{color:var(--green);}
.ph-save.error{color:var(--red);}
/* A board tab is a thing this project has, not a view Oumi ships */
.ptab-board .msi{color:var(--m3-primary);}
.ptab-board.active .msi{color:var(--m3-primary);}
.ph-dochead{display:flex; align-items:flex-start; gap:14px; margin:28px 0 14px; padding-top:22px;
  border-top:1px solid var(--m3-outline-variant);}
.ph-dochead > div:first-child{flex:1; min-width:0;}
.ph-dochead h3{font-family:'Google Sans',Roboto,sans-serif; font-size:18px; font-weight:400; color:var(--m3-on-surface); margin:0 0 3px;}
.tabmenu-item .check.fixed{color:var(--m3-primary); opacity:.55;}

/* ---------- creep, announced ---------- */
.creep-card{max-width:560px; padding:0; overflow:hidden;}
.creep-head{display:flex; gap:14px; align-items:flex-start; padding:22px 24px 16px;}
.creep-head > .msi{font-size:24px; color:var(--amber); flex-shrink:0; margin-top:2px;}
.creep-head h3{font-family:'Google Sans',Roboto,sans-serif; font-size:19px; font-weight:400; margin:0 0 5px; color:var(--m3-on-surface);}
.creep-head p{margin:0; font-size:13.5px; line-height:1.6; color:var(--m3-on-surface-variant);}
.creep-head p b{color:var(--m3-on-surface); font-weight:500;}
.creep-list{max-height:280px; overflow-y:auto; border-top:1px solid var(--m3-outline-variant);}
.creep-row{display:flex; gap:11px; align-items:flex-start; padding:12px 24px; border-bottom:1px solid var(--m3-outline-variant);}
.creep-row .msi{font-size:17px; color:var(--amber); margin-top:1px; flex-shrink:0;}
.creep-row div{display:flex; flex-direction:column; gap:3px; min-width:0;}
.creep-row b{font-size:13.5px; font-weight:400; line-height:1.45; color:var(--m3-on-surface);}
.creep-row span{font-size:12px; color:var(--text3);}
.creep-more{padding:11px 24px; font-size:12.5px; color:var(--text3);}
.creep-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 24px;}
.creep-grp{border-bottom:1px solid var(--m3-outline-variant);}
.creep-grphead{display:flex; gap:10px; align-items:flex-start; padding:13px 24px 9px;}
.creep-grphead .msi{font-size:18px; margin-top:1px; flex-shrink:0;}
.creep-grphead div{display:flex; flex-direction:column; gap:2px;}
.creep-grphead b{font-size:13px; font-weight:500; color:var(--m3-on-surface);}
.creep-grphead span{font-size:12px; line-height:1.5; color:var(--m3-on-surface-variant);}
.creep-grp.new .creep-grphead .msi{color:var(--amber);}
.creep-grp.gap .creep-grphead .msi{color:var(--red);}
.creep-grp.fwd .creep-grphead .msi{color:var(--m3-primary);}
.creep-grp .creep-row{border-bottom:none; padding:5px 24px 5px 52px;}
.creep-grp .creep-row:last-child{padding-bottom:12px;}
.ck{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:var(--r-full);
  font-size:11px; font-weight:500; background:var(--m3-surface-2); color:var(--m3-on-surface-variant); flex-shrink:0;}
.ck .msi{font-size:14px;}
.ck.new{background:var(--amber-bg); color:var(--amber);}
.ck.gap{background:var(--red-bg); color:var(--red);}
.ck.fwd{background:var(--m3-primary-container); color:var(--m3-on-primary-container);}
.ph-menu-note{display:block; font-size:10.5px; color:var(--text3); margin-top:1px;}
.ph-menu button[data-locked]{align-items:flex-start;}
.ph-menu button[data-locked] .msi{color:var(--green); margin-top:1px;}
.hrd{display:inline-flex; align-items:center; gap:5px; color:var(--text3);}
.hrd .msi{font-size:14px;}
.hrd.new{color:var(--m3-primary);}
.msi.tab-lock{font-size:14px !important; margin-right:3px; opacity:.75; vertical-align:-2px;}
.al-bulk{display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:10px;
  border:1px solid var(--m3-primary); border-radius:var(--r-md); background:var(--m3-surface-1);}
.al-bulk b{font-size:13px; font-weight:500; color:var(--m3-primary); margin-right:auto;}
.al-grew{display:flex; gap:9px; align-items:flex-start; margin:0 14px 12px 44px; padding:9px 12px;
  border-radius:var(--r-sm); background:var(--red-bg); font-size:12px; line-height:1.5;}
.al-grew .msi{font-size:16px; color:var(--red); flex-shrink:0; margin-top:1px;}
.al-grew div{display:flex; flex-direction:column; gap:3px;}
.al-grew b{font-weight:500; color:var(--m3-on-surface);}
.al-grew span{color:var(--m3-on-surface-variant);}
.asum{display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:9px 12px;
  border-radius:var(--r-sm); background:var(--amber-bg); font-size:12px; line-height:1.55;}
.asum .msi{font-size:16px; color:var(--amber); flex-shrink:0; margin-top:1px;}
.asum div{display:flex; flex-direction:column; gap:2px;}
.asum b{font-weight:500; color:var(--m3-on-surface);}
.asum span{color:var(--m3-on-surface-variant);}
.asum span::before{content:"· "; color:var(--amber);}
.ph-lines{border-top:1px solid var(--m3-outline-variant); background:var(--m3-surface-1); padding-bottom:8px;}
.ph-lineshead{display:flex; align-items:center; gap:8px; padding:12px 16px 6px; font-size:12.5px;}
.ph-lineshead .msi{font-size:17px; color:var(--m3-on-surface-variant);}
.ph-lineshead b{font-weight:500; color:var(--m3-on-surface);}
.ph-lineshead span{color:var(--text3);}
.ph-line{display:flex; gap:10px; align-items:flex-start; padding:6px 16px; font-size:13px; line-height:1.45; cursor:pointer;}
.ph-line:hover{background:var(--m3-surface-2);}
.ph-line input{margin-top:2px; width:15px; height:15px; accent-color:var(--green); cursor:pointer;}
.ph-line.done span{color:var(--text3); text-decoration:line-through; text-decoration-color:var(--m3-outline);}

/* HEARD FROM THE FIELD
   Below the asks, deliberately quieter than them: it is real material and it
   is not what the client asked for. The separation is the whole point, so the
   divider is heavier than the card. */
.fld-head{display:flex; gap:12px; align-items:flex-start; margin:28px 0 12px; padding-top:20px;
  border-top:2px solid var(--m3-outline-variant);}
.fld-head .msi{color:var(--m3-on-surface-variant); font-size:20px; margin-top:1px;}
.fld-head b{display:block; font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:14.5px;
  color:var(--m3-on-surface); margin-bottom:3px;}
.fld-head span{font-size:12.5px; line-height:1.55; color:var(--m3-on-surface-variant); max-width:76ch;}
/* These are never collapsed, so they keep the padding the ask rows gave up to
   their own header when they became click-to-open */
.fld-row{background:var(--m3-surface-1); border-style:dashed; padding:14px 16px;}
.fld-row .feat-title{color:var(--m3-on-surface-variant);}
/* We promised a feature to somebody who is not paying for it. Loud on purpose. */
.fld-warn{display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:9px 11px;
  border-radius:var(--r-sm); background:color-mix(in srgb, var(--amber) 12%, transparent);}
.fld-warn .msi{font-size:17px; color:var(--amber); margin-top:1px;}
.fld-warn b{display:block; font-size:12.5px; color:var(--m3-on-surface);}
.fld-warn span{font-size:12px; color:var(--m3-on-surface-variant);}
.task-ask.adopt{border-color:var(--m3-primary); color:var(--m3-primary);}
.task-ask.adopt:hover{background:color-mix(in srgb, var(--m3-primary) 10%, transparent);}

/* A call the model could not read offers the one action worth offering */
.call-chip.retrychip{display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  border:1px solid var(--m3-outline-variant); background:var(--m3-surface);
  color:var(--m3-primary); font:inherit; font-size:11.5px;}
.call-chip.retrychip:hover{background:color-mix(in srgb, var(--m3-primary) 10%, transparent);}
.call-chip.retrychip .msi{font-size:14px;}

/* Counts on a screen are only as complete as what could be read. Loud, because
   a quietly incomplete list is the thing a person will act on. */
.data-warn{display:flex; gap:11px; align-items:center; margin:0 0 14px; padding:12px 14px;
  border-radius:var(--r-md); border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
  background:color-mix(in srgb, var(--red) 8%, transparent);}
.data-warn .msi{color:var(--red); font-size:20px;}
.data-warn > div{flex:1; min-width:0;}
.data-warn b{display:block; font-size:13px; color:var(--m3-on-surface); margin-bottom:2px;}
.data-warn span{font-size:12.5px; line-height:1.5; color:var(--m3-on-surface-variant);}
.card-unread{display:inline-flex; align-items:center; gap:4px; color:var(--red);}
.card-unread .msi{font-size:15px;}

/* ---------- running inside the Mac app ----------
   The window hides its title bar so the app's own bar reaches the top edge,
   which leaves macOS drawing the close, minimise and zoom buttons directly over
   the top left corner. The brand moves to the centre, where a Mac app usually
   puts its title anyway, and the left keeps enough room for the buttons. */
.desktop .topbar{padding-left:88px; -webkit-app-region:drag;}
.desktop .tb-brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  pointer-events:none;   /* it is a label here, not a control */
}
/* Anything you can click has to opt back out of dragging, or the window moves
   instead of the button being pressed */
.desktop .topbar button,
.desktop .topbar a,
.desktop .topbar input,
.desktop .topbar select,
.desktop .topbar .avatar,
.desktop .topbar .fp-stack,
.desktop .topbar [data-tip]{-webkit-app-region:no-drag;}

/* The sign-in screen is its own view with no top bar, so it inherited no
   draggable strip: the window could not be moved by its top edge and a double
   click there did not zoom, both of which worked everywhere else. A band
   across the top gives it the same behaviour. It is fixed, so it stays out of
   the centring, and the card sits above it in case the window is short. */
.desktop #view-signin::before{
  content:''; position:fixed; top:0; left:0; right:0; height:52px;
  -webkit-app-region:drag; z-index:0;
}
.desktop #view-signin > *{position:relative; z-index:1; -webkit-app-region:no-drag;}

/* Heading for a settings pane that needs a line of explanation. Its own class
   rather than pf-sechead, which is a flex row used elsewhere and would put the
   title and the description side by side on top of each other. */
.pf-secintro{margin-bottom:20px;}
.pf-secintro h3{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:17px; font-weight:500; color:var(--m3-on-surface);}
.pf-secintro p{margin-top:5px; font-size:13px; line-height:1.55; color:var(--m3-on-surface-variant); max-width:56ch;}

/* The top bar stays put while the page moves under it, and lets a little of
   that page show through, the way a Mac app's toolbar does. Appended here so it
   wins over the earlier .topbar rules. */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--m3-surface) 76%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
}

/* ---------- the window scrolls nothing; the panels scroll themselves ----------
   The page used to grow and the whole document scrolled, which carried the top
   bar and the tab strip away with it. An app of two panels should hold its
   chrome still and let each panel move its own contents, so the shell is
   exactly one viewport tall and the scrolling happens inside. */
html, body{height:100%; overflow:hidden;}
#shell.active{height:100vh; overflow:hidden;}
.body-row{flex:1; min-height:0; align-items:stretch;}
.main{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;}

/* Inside a project the split holds the full height and each side scrolls */
.proj-split{height:100%; min-height:0; align-items:stretch;}
.ps-main{min-height:0; overflow-y:auto; overflow-x:hidden;}
.ps-side{position:relative; top:auto; height:100%; min-height:0; align-self:stretch;}

/* The top bar no longer has to pin itself: nothing scrolls underneath it */
.topbar{position:relative; z-index:40;}

/* The rule under the Co-pilot title runs the full width of its panel and uses
   the same stroke as the tab strip in the left pane, rather than stopping short
   at the panel's padding in a slightly different colour. */
.cp-title{
  margin-left:-20px; margin-right:-20px;
  padding-left:20px; padding-right:20px;
  border-bottom:1px solid var(--m3-outline-variant);
}

/* The sign-in card leads with the badge, then goes straight to what you are
   being asked to do. The heading element stays in the DOM because the script
   still writes to it; it just is not shown. */
#view-signin #authTitle{display:none;}
#view-signin #authSub{font-family:'Google Sans','Roboto',Arial,sans-serif; font-size:21px;
  font-weight:400; color:var(--m3-on-surface); margin-top:14px;}

/* Last word on the parked tab strip, because the responsive rules further up
   set margin and padding as shorthands and would otherwise put back the band
   above it at narrower widths. Only the vertical values are pinned here; the
   horizontal bleed stays whatever the width in play asks for. */
.ps-main{padding-top:0;}
.tabrow{margin-top:0; padding-top:20px; top:0;}

/* Somebody the model judged was only shown the product. Not a choice in the
   who-is-who pass, which is a fast two-sided sweep, but stated so the row does
   not look like it simply has no side. */
.rm-shown{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:11.5px; color:var(--amber); background:var(--amber-bg); white-space:nowrap;}