/* Deal workspace, report review and the deal ladder. Phones: one column in reading order. Wide screens: real two-column workspaces. */

/* phone order for the deal: gate, questions, start, where it stands, summary, meetings, options */
.j-dgrid { display:flex; flex-direction:column; }
.j-dmain, .j-dside { display:contents; }
#dGate { order:1; } #dAsk { order:2; } #dStart { order:3; } #dPos { order:4; } #dFacts { order:5; } .j-hist { order:6; } #dws .j-more { order:7; } #dErr { order:8; }
.j-hist .j-h { margin-top:18px; }
.j-extra { margin-top:6px; border-top:1px solid var(--rule); padding-top:8px; }
.j-extra summary { cursor:pointer; color:var(--primary); font:600 14px var(--body); min-height:40px; display:flex; align-items:center; }

/* where the deal stands: four rungs, the reached ones filled; readings apart */
.j-ladder { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px; }
.j-lv { border:1px solid var(--rule); border-radius:12px; padding:10px 12px; background:var(--paper); }
.j-lv-h { display:grid; gap:2px; } .j-lv-h b { font:700 15px var(--display); color:var(--soft); } .j-lv-h small { color:var(--soft); font-size:12.5px; line-height:1.5; }
.j-lv.has { background:var(--panel); border-inline-start:4px solid var(--primary); } .j-lv.has .j-lv-h b { color:var(--ink); }
.j-lv.acceptance.has { border-inline-start-color:var(--sky); } .j-lv.conditional.has { border-inline-start-color:var(--brass); } .j-lv.final.has { border-inline-start-color:var(--jade); }
.j-lv.inference { margin-top:10px; border-style:dashed; background:color-mix(in srgb, var(--brass) 8%, var(--panel)); border-inline-start-width:1px; }
.j-lv ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.j-lv ul li { display:grid; gap:2px; font-size:15px; line-height:1.55; }
.j-lv .j-cond { color:var(--amber-ink); font-size:14px; } .j-lv .j-meta { color:var(--soft); font-size:12.5px; }
.j-lv .j-none { margin:4px 0 0; color:var(--soft); font-size:13px; }
.j-lv:not(.has):not(.inference) .j-lv-h small { display:none; }

/* report review */
.r-main, .r-side { display:grid; gap:0; }
.r-guard summary { cursor:pointer; font:600 14px var(--body); color:var(--amber-ink); min-height:40px; display:flex; align-items:center; }
.r-guard ul { margin:6px 0 0; padding-inline-start:18px; font-size:14px; line-height:1.6; }
.j-pos { list-style:none; margin:8px 0; padding:0; display:grid; gap:10px; }
.j-pos > li { border:1px solid var(--rule); border-inline-start:4px solid var(--primary); border-radius:12px; padding:10px; display:grid; gap:6px; background:var(--paper); }
.j-pos > li.lv-acceptance { border-inline-start-color:var(--sky); } .j-pos > li.lv-conditional { border-inline-start-color:var(--brass); } .j-pos > li.lv-final { border-inline-start-color:var(--jade); }
.j-pos > li.j-empty-li { border:1px dashed var(--rule); color:var(--soft); font-size:14px; }
.j-pos-top { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.j-pos .j-sel { width:auto; min-height:44px; padding:6px 10px; font-size:14px; flex:1 1 38%; min-width:0; }
.j-pos .j-pos-top .j-src { flex:none; }
.j-pos .j-x { margin-inline-start:auto; }
.j-lv-hint { color:var(--soft); font-size:12.5px; line-height:1.5; }
.j-src.user { color:var(--primary); background:var(--primary-soft); }

@media (min-width:980px) {
  body[data-screen=home] #app, body[data-screen=dws] #app, body[data-screen=review] #app { max-width:1240px; padding-inline:32px; }
  body[data-screen=dws], body[data-screen=review] { font-size:17px; }
  /* the deal: work on the left of the reading direction, reference on the side */
  .j-dtop { max-width:880px; }
  .j-dgrid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:32px; align-items:start; margin-top:8px; }
  .j-dmain, .j-dside { display:block; }
  .j-dside { position:sticky; top:16px; }
  #dws .j-start { font-size:19px; min-height:62px; }
  .j-ladder { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .j-lv { min-height:110px; }
  .j-lv:not(.has):not(.inference) .j-lv-h small { display:block; }
  .j-known li { font-size:16px; }
  /* the report: what happened on the main side, what to do next and the approval on the side */
  #review { max-width:none; }
  #review > h1, #review > .j-lede { max-width:880px; }
  #rBody { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr); gap:32px; align-items:start; }
  .r-side { position:sticky; top:16px; }
  #review .j-dock { max-width:1240px; }
  #coachBox { max-width:880px; }
}
@media (min-width:980px) and (max-width:1180px) { .j-ladder { grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* the next step on a deal, and its compact history */
.j-nextbox { display:grid; gap:2px; padding:14px 16px; border-radius:var(--r); background:var(--primary-soft); border-inline-start:4px solid var(--primary); margin-bottom:12px; }
.j-nextbox.today { border-color:var(--brass); background:color-mix(in srgb, var(--brass) 14%, var(--panel)); }
.j-nextbox.late { border-color:var(--coral); background:color-mix(in srgb, var(--coral) 10%, var(--panel)); }
.j-nextbox.hidden { display:none; }
.j-nb-k { font:600 13px var(--body); color:var(--soft); } .j-nextbox b { font:700 17px/1.5 var(--display); } .j-nb-d { font:600 14px var(--body); }
.j-tl summary { cursor:pointer; font:700 15px var(--display); min-height:44px; display:flex; align-items:center; }
.j-tl-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px; }
.j-tl-list li { display:flex; gap:12px; font:400 14px/1.6 var(--body); } .j-tl-list time { flex:none; min-width:56px; color:var(--soft); font:500 13px var(--mono); }
.j-tl.hidden { display:none; }
/* report: retry and rating */
.r-retry { display:grid; gap:10px; border-inline-start:4px solid var(--brass); }
.r-retry p { margin:0; }
.r-rate .chips { margin:6px 0 10px; }
/* home: follow-ups due today or overdue */
.j-duebox { display:grid; gap:8px; border-inline-start:4px solid var(--brass); margin-bottom:14px; }
.j-duebox.hidden { display:none; }
.j-due { display:grid; gap:2px; text-align:start; width:100%; background:var(--sunk); border:0; border-radius:12px; padding:12px 14px; cursor:pointer; color:var(--ink); font:inherit; min-height:52px; }
.j-due:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.j-due-w { font:600 14px var(--body); color:var(--soft); } .j-due.late .j-due-w { color:var(--coral); }
.j-due-o { font:400 13.5px/1.6 var(--body); color:var(--soft); }
/* the deals list: a column beside home, a deal and a report on wide screens; a drawer behind ☰ on phones */
.side { display:none; }
.side-h { display:grid; gap:10px; margin-bottom:10px; } .side-h b { font:700 16px var(--display); }
.side-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side-x { width:44px; height:44px; border:0; border-radius:12px; background:var(--sunk); color:var(--ink); font:600 18px var(--body); cursor:pointer; }
.side-new { width:100%; min-height:44px; }
.side-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.side-d { width:100%; display:grid; gap:2px; text-align:start; background:transparent; border:0; border-radius:12px; padding:10px 12px; cursor:pointer; color:var(--ink); font:inherit; min-height:52px; }
.side-d:hover { background:var(--sunk); } .side-d.on { background:var(--primary-soft); }
.side-d:focus-visible { outline:3px solid var(--primary); outline-offset:1px; }
.side-n { font:600 15px/1.4 var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-m { display:flex; gap:6px; align-items:center; font-size:12.5px; }
.side-m .j-status { font-size:12px; }
.side-due { font:700 11.5px var(--body); color:var(--on-brass); background:var(--brass); border-radius:999px; padding:0 8px; } .side-due.late { background:var(--coral); color:#fff; }
.side-empty { color:var(--soft); font-size:14px; padding:8px 12px; }
.tb-start { display:flex; align-items:center; gap:6px; }
.menu-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:12px; background:transparent; color:var(--ink); cursor:pointer; }
.menu-btn:hover { background:var(--sunk); } .menu-btn:focus-visible { outline:3px solid var(--primary); outline-offset:1px; }
@media (max-width:1099.98px) {
  .side.on.open { display:block; position:fixed; top:0; bottom:0; inset-inline-start:0; width:min(86vw,340px); z-index:70; overflow:auto;
    background:var(--panel); padding:16px; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .side-scrim { position:fixed; inset:0; z-index:65; background:rgba(10,22,48,.45); }
}
@media (max-width:979.98px) {
  /* phone home: only the new deal; the deals live in the drawer */
  #home > .j-list, #home > .j-duebox { display:none !important; }
}
@media (min-width:1100px) {
  .menu-btn, .side-x, .side-scrim { display:none !important; }
  body[data-screen=home] #app, body[data-screen=dws] #app, body[data-screen=review] #app { max-width:1440px; display:grid; grid-template-columns:260px minmax(0,1fr); column-gap:32px; align-items:start; }
  body[data-screen=home] #app > *, body[data-screen=dws] #app > *, body[data-screen=review] #app > * { grid-column:2; }
  #app > #appBar { grid-column:1 / -1 !important; }
  .side.on { display:block; grid-column:1 !important; grid-row:2 / span 30; position:sticky; top:16px; max-height:calc(100dvh - 32px); overflow:auto;
    background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg); padding:14px; }
}
/* home: what the deal description should hold */
.j-need { list-style:none; margin:0 auto 18px; padding:0; display:grid; gap:6px; max-width:30em; text-align:start; }
.j-need li { background:rgba(255,255,255,.07); border-radius:12px; padding:8px 12px; font:400 14.5px/1.6 var(--body); color:var(--on-sea-soft); }
.j-need b { color:var(--on-sea); margin-inline-end:6px; }
.j-hero .j-type summary { border:1.5px solid rgba(255,255,255,.35); border-radius:var(--r); margin:4px auto 0; max-width:320px; }
.j-need-more { max-width:30em; margin:-8px auto 16px; text-align:start; }
.j-need-more summary { cursor:pointer; color:var(--on-sea); font:600 14px var(--body); min-height:40px; display:flex; align-items:center; justify-content:center; }
.j-need-more .j-need { margin:6px 0 0; }