/* BridgePath EHR — BPC design system (official brand colors) */
:root{
  --sage:#578e77; --sage-deep:#3d6553; --rust:#a25328; --coral:#d94a3a;
  --bg:#faf6ef; --card:#ffffff; --ink:#404040; --muted:#6b7a74; --line:#e6e0d4;
  --chip:#eef2ee; --soft:#f4efe6;
  --c-phq:#2f8a68; --c-pcl:#a95e1e; --c-gad:#4479b8; --c-scs:#d75e3d; --c-kims:#7a5ea8; --c-ffmq:#3f8f99;
  --risk:#b3372f; --risk-soft:#fbeae8; --ok:#2f6f4f; --ok-soft:#e9f3ec;
  --warn:#a15c07; --warn-soft:#fdf3e0;
  --hi:#c8176f; --hi-soft:#fde8f1;   /* v0.1.7: magenta pink = high priority (Lori, 11 Sep 2026) */
  --cat-client:#8fcbef; --cat-personal:#f5a9c9; --cat-training:#c3aee6; --cat-mpc:#cbc3b6; --cat-labyrinth:#e3c99b;
  --cat-plan:#9cc9ae; --cat-call:#f2c979; --cat-license:#8fd1c6; --cat-admin:#b9c3cc; --cat-other:#d9d4cc; --cat-intake:#f7b58a; --cat-crp:#e7a3a0; --cat-note:#f0d28c;
  --shadow:0 1px 3px rgba(40,50,46,.08),0 4px 14px rgba(40,50,46,.06);
}
body.night{
  --bg:#1a1a19; --card:#242522; --ink:#e8e6df; --muted:#a3a89f; --line:#3a3b36;
  --chip:#2e302b; --soft:#2a2b27; --risk-soft:#3a2523; --ok-soft:#233028; --warn-soft:#37301f;
  --hi:#ff7ab8; --hi-soft:#3a2230;
  --shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
.wrap{max-width:1240px;margin:0 auto;padding:14px 18px 44px}
h1,h2,h3{margin:0;font-weight:650}
button{font:inherit;cursor:pointer}
a{color:var(--sage-deep)} body.night a{color:#9cc4b5}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);position:sticky;top:10px;z-index:50;margin-bottom:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--sage-deep);text-decoration:none}
body.night .logo{color:#9cc4b5}
.logo img{height:30px;width:auto}
.tabs{display:flex;gap:4px;margin-left:6px}
.tab{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:5px 13px;font-size:12.5px;color:inherit;text-decoration:none}
.tab.on{background:var(--sage);color:#fff;border-color:var(--sage);font-weight:600}
.topright{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12.5px}
.iconbtn{border:1px solid var(--line);background:var(--chip);border-radius:999px;padding:5px 12px;font-size:12.5px;color:inherit}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px}
.card h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--sage)}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;display:inline-block}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent;font-weight:600}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent;font-weight:600}
.chip.risk{background:var(--risk-soft);color:var(--risk);border-color:transparent;font-weight:600}
.btn{background:var(--sage);color:#fff;border:none;border-radius:11px;padding:9px 18px;font-weight:700;font-size:13.5px}
.btn:hover{background:var(--sage-deep)}
.btn.ghost{background:var(--card);color:var(--sage-deep);border:1px solid var(--sage)}
a.btn,a.iconbtn{text-decoration:none} /* v0.2.57 (v0.2.61: iconbtn too): link buttons match the others (no underline) */
.btn.warn{background:var(--warn)} .btn.risk{background:var(--risk)}
.btn:disabled{opacity:.5;cursor:not-allowed}
input[type=text],input[type=date],input[type=datetime-local],input[type=number],input[type=tel],input[type=email],input[type=time],select,textarea{border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;padding:8px 11px;outline:none;max-width:100%}
textarea{width:100%;resize:vertical;min-height:60px}
label.f{display:block;font-size:12.3px;font-weight:650;margin:10px 0 4px}
label.f span{color:var(--muted);font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
@media(max-width:980px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:11px 13px}
.tile .n{font-size:24px;font-weight:750}
.tile .l{font-size:11.3px;color:var(--muted);line-height:1.25}
.tile.warn{border-color:var(--warn)} .tile.warn .n{color:var(--warn)}
.tile.risk{border-color:var(--risk)} .tile.risk .n{color:var(--risk)}
table.t{border-collapse:collapse;width:100%;font-size:13px}
.t th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--line)}
.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:none}
.t tr.click:hover td{background:var(--soft);cursor:pointer}
.ava{width:32px;height:32px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:none}
.ava.risk{background:var(--risk)}
.al{display:flex;gap:10px;padding:9px 11px;border-radius:12px;margin-bottom:8px;align-items:flex-start;font-size:12.8px}
.al.risk{background:var(--risk-soft);border:1px solid var(--risk)}
.al.warn{background:var(--warn-soft);border:1px solid var(--warn)}
.al .act{margin-left:auto;flex:none}
.chiprow{display:flex;gap:6px;flex-wrap:wrap}
.skillchip{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:4px 12px;font-size:12.3px;cursor:pointer;user-select:none}
.skillchip.on{background:var(--sage);border-color:var(--sage);color:#fff;font-weight:600}
.notice{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:12.3px;color:var(--muted)}
.slot{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.slot:last-child{border-bottom:none}
#toast{position:fixed;left:50%;transform:translateX(-50%);top:70px;background:var(--ink);color:var(--bg);font-size:12.5px;padding:7px 14px;border-radius:9px;opacity:0;transition:opacity .15s;z-index:99;pointer-events:none}
.preview{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre-wrap}
.mcard{border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--card)}
.foot{margin-top:6px;padding:11px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:11.5px;text-align:center}
/* v0.1.5: idle-logoff warning + session line */
.idle-warn{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;max-width:min(560px,calc(100% - 32px));background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);font-size:13.5px;line-height:1.45;padding:11px 16px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:98}
.warn-text{color:var(--warn)}
#sessinfo{display:inline-block;margin-top:4px}
body.night .idle-warn,body.night .warn-text{color:#f0c27a;border-color:#8a6a2e}
/* v0.1.6: My Day fits a phone (inline grid widths moved here so the media queries can win) */
.grid-myday{display:grid;grid-template-columns:330px 1fr;gap:14px}
.grid-myday>div{min-width:0}
.grid-chart{display:grid;grid-template-columns:320px 1fr;gap:14px}
.grid-chart>div{min-width:0}
.weekgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:900px){.grid-myday,.grid-chart{grid-template-columns:1fr}.weekgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.weekgrid{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}.slot{flex-wrap:wrap}.tabs{margin-left:0;flex-wrap:wrap}.wrap{padding:10px 10px 40px}}
/* v0.1.6: stand-alone Month view */
.mhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mhead h1{font-size:20px;min-width:170px;text-align:center}
.mlayout{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.mlayout>div{min-width:0}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dowc{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:center;padding:2px 0 4px}
.dowc.off{opacity:.6}
.mc{min-height:92px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:6px;display:flex;flex-direction:column;gap:3px;text-align:left;color:inherit;font:inherit;min-width:0;cursor:pointer}
.mc.blank{background:transparent;border:1px dashed transparent;cursor:default}
.mc.off{background:var(--soft)}
.mc:hover,.mc:focus-visible{border-color:var(--sage);outline:none}
.mc.today .dn{background:var(--rust);color:#fff}
.mc.sel{border:2px solid var(--sage);padding:5px}
.dn{font-size:12px;font-weight:700;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ev{font-size:10.8px;border-radius:6px;padding:1px 5px;background:var(--chip);border-left:3px solid var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.office{border-left-color:var(--rust)}
.ev.ns{text-decoration:line-through;opacity:.7}
.more{font-size:10.5px;color:var(--muted)}
.due{color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:0 4px;font-size:10.5px}
.dayp{position:sticky;top:84px;margin-bottom:0}
.mlegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;margin-top:10px}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--sage)}
.lg.office{background:var(--rust)}
.agenda{display:none}
.ag{margin-bottom:10px}
.agd{font-weight:700;font-size:12.5px;color:var(--sage-deep);padding:4px 0;border-bottom:1.5px solid var(--line)}
.agd.today{color:var(--rust)}
summary.agd{cursor:pointer;list-style-position:inside}
body.night .agd{color:#9cc4b5}
@media(max-width:980px){.mlayout{grid-template-columns:1fr}.dayp{position:static}}
@media(max-width:640px){#dow,#grid,#dayPanel{display:none}.agenda{display:block}.mhead h1{min-width:0;font-size:17px}}
/* v0.1.6: record-retention chip on the chart */
.chip.keep{background:var(--soft);border-color:var(--line)}
.chip.keep.ut{background:var(--warn-soft);color:var(--warn);border-color:transparent;font-weight:600}
/* v0.1.7: Month tasks card + open times */
.tasks{margin-top:14px}
.tk{display:grid;grid-template-columns:22px 58px 118px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-bottom:1px dashed var(--line);font-size:12.8px;border-left:3px solid transparent;border-radius:6px}
.tk:last-child{border-bottom:none}
.tk.hi{border-left-color:var(--hi);background:var(--hi-soft)}
.tk.done{opacity:.55}.tk.done .tk-title{text-decoration:line-through}
.tk input[type=checkbox]{width:16px;height:16px;accent-color:var(--sage)}
.tk-auto{color:var(--muted);text-align:center}
.tk-due{font-weight:700;color:var(--sage-deep)}
body.night .tk-due{color:#9cc4b5}
.tk-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tk-title{min-width:0}
.tk-end{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.tk-pill{background:var(--hi);color:#fff;border-radius:999px;padding:1px 8px;font-size:10.5px}
.late{color:var(--hi);font-size:11px}
.tk-due.late{font-size:12.8px}
.chip.tk-chip{background:var(--hi-soft);color:var(--hi);border-color:transparent;font-weight:600}
.tk-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--olive,#b2bc88);margin-right:4px;transform:rotate(45deg)}
.tk-dot.hi{background:var(--hi)}
.tk-mark{font-size:10.5px;color:var(--muted);margin-top:auto}
.tk-mark.hi{color:var(--hi);font-weight:600}
.tkform{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.tkgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.subh{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:12px 0 4px;font-weight:650}
.chip.office{border-left:3px solid var(--rust)}
.hint{color:var(--muted);font-size:11.5px}
@media(max-width:640px){.tk{grid-template-columns:22px 52px 1fr;}.tk-cat{display:none}.tk-end{grid-column:2/-1;justify-content:flex-start}.tkgrid{grid-template-columns:1fr}}
/* v0.1.7: My Day "Today" rows: time + client on one line, the three buttons on the line below */
#today .slot{flex-wrap:wrap}
#today .slot>b{white-space:nowrap;width:66px!important}
#today .slot-acts{flex-basis:100%;margin-left:0!important;margin-top:-2px;justify-content:flex-end;flex-wrap:wrap}
#today .slot-acts .iconbtn{white-space:nowrap}
/* v0.1.8: category colours, busy blocks, colour picker */
.ev.client{background:color-mix(in srgb,var(--cat-client) 38%,var(--card));border-left-color:var(--cat-client)}
.ev.client.office{border-left-color:var(--rust)}
.ev.blk{background:color-mix(in srgb,var(--c) 45%,var(--card));border-left:3px solid var(--c);font-style:italic}
.blkrow{background:color-mix(in srgb,var(--c) 22%,transparent);border-radius:8px;padding-left:6px}
.blkrow .sw.big{background:var(--c)}
.sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:0}
.sw.big{width:14px;height:14px;border-radius:4px;flex:none}
.tk-time{text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink)}
.colpanel{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:var(--soft)}
.colrow{display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.colrow:last-of-type{border-bottom:none}
.collab{min-width:190px;font-size:12.5px;display:flex;align-items:center;gap:6px}
.swatches{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.swb{width:20px;height:20px;border-radius:6px;border:2px solid transparent;padding:0;cursor:pointer}
.swb.on{border-color:var(--ink)}
.swatches input[type=color]{width:28px;height:22px;border:1px solid var(--line);border-radius:6px;padding:0;background:none}
.tk-note{font-size:11.8px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.tk-note a{color:var(--sage-deep)}
body.night .tk-note a{color:#9cc4b5}

/* v0.2.9: in the Month side panel the task rows are narrow — stack the title under the date and
   category instead of squeezing it into a one-letter column (Lori's screenshot, 25 Sep 2026). */
#dayPanel .tk{grid-template-columns:22px auto 1fr auto;grid-template-areas:"cb due cat end" ". title title title";row-gap:3px}
#dayPanel .tk > :first-child{grid-area:cb}
#dayPanel .tk-due{grid-area:due}
#dayPanel .tk-cat{grid-area:cat}
#dayPanel .tk-title{grid-area:title;overflow-wrap:anywhere}
#dayPanel .tk-end{grid-area:end;display:flex;gap:6px;align-items:center}
/* v0.2.9: chosen option in a row of small buttons */
.iconbtn.on{background:var(--sage);color:#fff;border-color:var(--sage);font-weight:600}
.ev.grp{background:color-mix(in srgb,#c3aee6 40%,var(--card));border-left:3px solid #8e6fc4}
/* v0.2.14 maintenance plan form */
.maint .mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.maint .mrow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0;background:var(--soft)}
.maint textarea{width:100%;min-height:48px}
.maint .m-plhow{width:100%}
@media (max-width:760px){.maint .mgrid{grid-template-columns:1fr 1fr}.maint .m-pl{grid-template-columns:1fr!important}}
@media (max-width:480px){.maint .mgrid{grid-template-columns:1fr}}
.q{background:var(--soft);border-left:3px solid var(--sage);border-radius:8px;padding:8px 10px;margin:6px 0;font-size:13px;white-space:pre-wrap}
.q b{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px;white-space:normal}

/* v0.2.17 payer tags */
.ptag{display:inline-block;font-size:10px;font-weight:700;line-height:1;padding:2px 5px;border-radius:5px;vertical-align:1px;letter-spacing:.02em;border:1px solid transparent}
.ptag-lyra{background:#e7def8;color:#4b2f86}
.ptag-headway{background:#d7efe9;color:#1d5b4e}
.ptag-private{background:#e9e6e1;color:#4a4540}
.ptag-other{background:#f6e7cf;color:#6b4a12}
.ptag-tricare{background:#dfe7f3;color:#24406b}   /* v0.2.52 */
[data-theme="dark"] .ptag{filter:brightness(.9)}
/* v0.2.17 objective status chips */
.stchip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid transparent;vertical-align:1px}
.st-improving{background:#d9eedf;color:#1f6b3a}
.st-slow{background:#e8f0d4;color:#4d6a12}
.st-steady{background:#ecebe6;color:#55504a}
.st-attention{background:#fbe1d6;color:#9a3412}
.st-none{background:transparent;color:var(--muted);border-color:var(--line);font-weight:500}
.stchip.sugg{border-style:dashed;border-color:currentColor}
select.stsel{font-size:11.5px;padding:2px 6px;border-radius:8px;margin-left:6px}

/* v0.2.21 (Lori, 26 Sep 2026): a tall pop-up could not scroll back to its top — flex centring pushed the top
   out of reach. 'safe center' centres only when it fits, otherwise starts at the top and scrolls. */
.modal, [id$="Modal"]{align-items:safe center!important;overflow-y:auto!important}
[id$="Modal"] > .card{margin-top:20px;margin-bottom:20px}

/* v0.2.40 Intake checklist — the house "pipeline" pattern: done = green · current = warm rust · future = neutral */
.ipipe{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:4px 0 12px}
.istg{border:1px solid var(--line);border-radius:12px;padding:7px 8px;background:var(--soft);text-align:left;color:inherit;min-width:0;font:inherit;cursor:pointer}
.istg .n{font-weight:700;font-size:12px}
.istg .t{font-size:12px;font-weight:600;line-height:1.25;margin:2px 0}
.istg .s{font-size:11px;color:var(--muted);line-height:1.3}
.istg.done{background:var(--ok-soft);border-color:#b9d8c4}.istg.done .n{color:var(--ok)}
.istg.cur{background:#f6e6dc;border-color:#dcb49b;box-shadow:0 0 0 2px #e8c8b4}.istg.cur .n{color:var(--rust)}
.istg.sel{outline:2px solid var(--sage-deep);outline-offset:1px}
body.night .istg.cur{background:#3a2a20;border-color:#6b4a35;box-shadow:none}
@media(max-width:900px){.ipipe{grid-template-columns:repeat(4,1fr)}}
@media(max-width:460px){.ipipe{grid-template-columns:repeat(2,1fr)}}
.iitem{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.itick{flex:0 0 22px;height:22px;border-radius:7px;border:1.5px solid #b9c3bd;background:var(--card);display:grid;place-items:center;font-size:13px;color:#fff;padding:0;cursor:pointer}
.itick.on{background:var(--sage);border-color:var(--sage)}
.itick.auto{background:var(--ok);border-color:var(--ok);cursor:default}
.itick.empty-auto{cursor:default;border-style:dashed}
.iitem .nm{font-weight:600;font-size:13px}
.isrc{font-size:11.5px;color:var(--ok);font-weight:600;margin-left:6px}
.iwhy{font-size:12px;color:var(--muted)}
.ipath{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:2px 7px;word-break:break-all}
.ifold{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* v0.2.42: section headings inside Client details stand out (Lori could not see "Emergency contact") */
.subh.big{font-size:13px;color:var(--sage-deep);border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
body.night .subh.big{color:#9cc4b5}
.subh.big.ec{color:var(--rust);font-size:14px}
body.night .subh.big.ec{color:#e39a6f}

/* v0.2.47: version line at the bottom of clinician pages */
.ehr-version{text-align:center;font-size:11px;color:var(--muted);padding:18px 0 14px}
@media print{.ehr-version{display:none}}

/* v0.2.57 chart layout (Lori chose A, 6 Oct 2026): third column on wide screens; below that the rail sits under the client card */
.wrap.wrap-chart{max-width:1440px}
.qagrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qagrid>.btn{display:flex;align-items:center;justify-content:center;text-align:center}
.grid-chart.three{grid-template-columns:320px 1fr;grid-template-areas:"client main" "rail main" "left main";grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:0}
.grid-chart.three>.gc-client{grid-area:client}.grid-chart.three>.gc-rail{grid-area:rail}.grid-chart.three>.gc-left{grid-area:left}.grid-chart.three>.gc-main{grid-area:main}
.gc-rail .grid2{grid-template-columns:1fr}   /* v0.2.60: measures one per row in the right-hand column */
@media(min-width:1300px){.grid-chart.three{grid-template-columns:300px 1fr 330px;grid-template-areas:"client main rail" "left main rail";grid-template-rows:auto 1fr}}
@media(max-width:900px){.grid-chart.three{grid-template-columns:1fr;grid-template-areas:"client" "rail" "left" "main";grid-template-rows:auto}}