/* The Clients tree's Roster (roster.js): the panel's own rows, tiles and tokens (app.css); only what the board, a
   client's drawer and a form's box add is here. Every class stands under .ro: the page, and each layer over it. */
.page[data-page="roster"] { max-width: 1340px; padding: 24px 28px 80px; }
[data-page="roster"] > .ro { container-type: inline-size; }  /* the board follows the room it has, not the window's width */
.ro { --violet: #5b3fc4; --orange: #a8480a; --magenta: #9a2fa3; --indigo: #3d4fc9; --pod: #1d6fd1; --onb: #6d4fd8; --offb: #5e6884; }
:root[data-theme="dark"] .ro { --violet: #a78bfa; --orange: #ff8a3d; --magenta: #d46ad8; --indigo: #8b9aff; }
.ro .ph-side .search { margin: 0; width: 240px; }
.ro .ph-side .btn[aria-pressed="true"] { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
/* "Read again" stands in the lede, beside the reading's age */
.ro-again { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 7px 1px 5px; border-radius: 6px; color: var(--blue); font-weight: 500; vertical-align: baseline; transition: background var(--t-fast); }
.ro-again:hover:not(:disabled) { background: var(--hover); } .ro-again svg.i { width: 13px; height: 13px; }
.ro .gline { margin-top: 18px; } .ro .gline a { font-weight: 500; }
.ro .stats { margin: 18px 0 4px; } .ro .stat small { color: var(--text3); font-size: 12px; } .ro .stat .v.bad { color: var(--bad); }
.ro .stat .v.ok { color: var(--ok); } .ro .stat .v.warn { color: var(--warn); } .ro .stat .v.muted { color: var(--text3); }
/* the CSM filter beside the search, as his "All CSMs"; its select is the whole pill */
.ro .ro-fcsm { height: 32px; } .ro .ro-fcsm > span { display: contents; }
.ro .ph-side > .primary { white-space: nowrap; }
.ro .empty { margin-top: 22px; }

/* a group: its tag as ClickUp names it, its count, and the arrow that folds it (down while open) */
.ro .gh { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 22px 2px 10px; }
.ro .gh:disabled { opacity: 1; }  /* under a filter every group that holds a match shows */
.ro .gh svg.i { width: 14px; height: 14px; color: var(--text3); flex: none; transform: rotate(90deg); transition: transform var(--t-fast); } .ro .gh[aria-expanded="false"] svg.i { transform: none; }
.ro .gh:hover:not(:disabled) svg.i { color: var(--text); }
.ro .gtag { font: 700 11px/1 var(--sans); letter-spacing: .05em; padding: 5px 9px; border-radius: 6px; color: #fff; background: var(--pod); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }  /* ClickUp's words: cut before the count leaves */
.ro .gtag.onb { background: var(--onb); } .ro .gtag.off { background: var(--offb); }
.ro .gh .cn { font: 12px var(--mono); color: var(--text3); flex: none; }
/* a pod's head also holds its CSM's control, after its count; the head's whole line still folds the pod */
.ro-ghead { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; cursor: pointer; } .ro-ghead .gh { width: auto; flex: 0 1 auto; }
.ro-ghead:hover .gh:not(:disabled) svg.i { color: var(--text); } .ro-ghead:not([data-ro-fold]) { cursor: default; }
.ro-ghead .ro-csm { margin-bottom: 6px; min-width: 0; }
.ro-gavg { margin: 0 2px 12px auto; color: var(--text3); font-size: 12.5px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ro-gavg b { color: var(--text); font-family: var(--mono); }
.ro-gavg b.ok { color: var(--ok); } .ro-gavg b.warn { color: var(--warn); } .ro-gavg b.bad { color: var(--bad); }

/* A CSM's control (roCsm): the panel's accounts in one pill, led by the chosen one's initials. With none chosen it
   reads "Not set", in the quieter ink. The select is the whole pill, so a click anywhere on it opens the choices. */
.ro-csm { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.ro-csm small { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.ro-pick { position: relative; display: inline-flex; align-items: center; height: 28px; min-width: 0; border: 1px solid var(--line2); border-radius: 999px; background: var(--raise); color: var(--text); font-size: 12.5px; font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast); }
.ro-pick:hover { background: var(--hover); border-color: var(--text3); } .ro-pick.nil { color: var(--text2); }
.ro-pick > .av, .ro-pick > svg.i { position: absolute; pointer-events: none; }
.ro .ro-pick > .av { left: 3px; width: 20px; height: 20px; font-size: 9px; } .ro-pick > svg.i:first-child { left: 9px; width: 14px; height: 14px; color: var(--text3); }
.ro-pick > svg.i:last-child { right: 9px; width: 12px; height: 12px; color: var(--text3); transform: rotate(90deg); }
.ro-pick select { appearance: none; field-sizing: content; height: 100%; min-width: 0; max-width: min(250px, 44vw); padding: 0 27px 0 29px; border: 0; border-radius: 999px; background: transparent; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-pick select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .ro-pick option { background: var(--raise); color: var(--text); font-weight: 400; }

/* the board's rows: twelve columns, as his: the six fields and the four after them (package, leads, health, CSM)
   inside .cells, which stands in the row's own grid while the page is wide enough for it */
.ro .bd .tr { grid-template-columns: minmax(180px, 1.35fr) 84px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.05fr) minmax(0, .95fr) 92px 70px 86px 72px; gap: 8px; padding: 7px 14px; font-size: 13px; }
.ro .bd .cells { display: contents; } .ro .bd .cells > span { min-width: 0; }
.ro .tr.head { font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 9px 14px; }
.ro a.tr { color: inherit; text-decoration: none; transition: background var(--t-fast); } .ro a.tr:hover { background: var(--hover); } .ro a.tr[aria-current] { background: var(--sel); }
.ro a.tr:focus-visible { outline-offset: -2px; border-radius: 0; }
.ro .nm { display: flex; align-items: center; gap: 9px; min-width: 0; } .ro .nm > span:last-child { min-width: 0; }
.ro .nm b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .nm small { display: block; color: var(--text3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; }
.ro .ring { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--pod); flex: none; } .ro .ring.onb { border: 2px dashed var(--onb); } .ro .ring.off { border-color: var(--text3); background: var(--text3); }
.ro .prog { display: flex; align-items: center; gap: 7px; font: 11.5px var(--mono); color: var(--text3); }
.ro .prog i { flex: 1; height: 5px; border-radius: 5px; background: var(--chip); overflow: hidden; } .ro .prog i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--text2); border-radius: 5px; } .ro .prog.done i::after { background: var(--ok); }
/* a field's value: one tag in its option's hue, read only */
.ro .tg { --tc: var(--text3); display: inline-block; max-width: 100%; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 9px; border-radius: 999px; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 24%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ro .h-green { --tc: var(--ok); } .ro .h-yellow { --tc: var(--warn); } .ro .h-red { --tc: var(--bad); } .ro .h-blue { --tc: var(--wait); } .ro .h-violet { --tc: var(--violet); } .ro .h-orange { --tc: var(--orange); } .ro .h-magenta { --tc: var(--magenta); } .ro .h-indigo { --tc: var(--indigo); }
.ro .pkg { font-size: 11.5px; font-weight: 600; color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .who { display: flex; align-items: center; gap: 6px; color: var(--text2); font-size: 12.5px; min-width: 0; }
.ro .who > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .av { width: 22px; height: 22px; display: grid; font: 700 9.5px var(--sans); }
/* a status's control: its tag, which opens ClickUp's options under it; faded while ClickUp has not answered */
.ro-set { display: inline-flex; max-width: 100%; border-radius: 999px; cursor: pointer; transition: opacity var(--t-fast); }
/* A status tag that opens a menu carries a chevron, drawn inside its padding so the label keeps its ellipsis */
.ro-set .tg::after { content: ''; position: absolute; right: 9px; top: 50%; width: 4px; height: 4px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .8; }
.ro-set .tg { position: relative; padding-right: 21px; transition: border-color var(--t-fast), background var(--t-fast); } .ro-set:hover .tg { border-color: color-mix(in srgb, var(--tc) 60%, transparent); }
.ro-set:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .ro-set.busy { opacity: .5; cursor: progress; }
.ro .tg.h-none { border-style: dashed; background: transparent; font-weight: 500; }
.ro-opts { position: fixed; z-index: 40; display: grid; gap: 1px; min-width: 190px; max-height: 340px; overflow: auto; padding: 5px; background: var(--raise); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); }
.ro-opts button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 7px; border-radius: 7px; } .ro-opts button:hover, .ro-opts button:focus-visible { background: var(--hover); outline: 0; }
.ro-opts svg.i { width: 14px; height: 14px; color: var(--ok); flex: none; }
/* leads in 7 and 30 days, red under the goals; health: the score in its label's hue, as his chip */
.ro .lds { display: inline-flex; gap: 3px; font: 12.5px var(--mono); } .ro .lds i { font-style: normal; color: var(--text3); } .ro .lds b { font-weight: 600; } .ro .down { color: var(--bad); }
.ro .hc { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--tc, var(--text3)); white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--tc, var(--text3)) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc, var(--text3)) 22%, transparent); }
.ro .hc b { background: var(--tc, var(--text3)); color: #0b0d0f; border-radius: 999px; padding: 0 6px; font: 700 11px/16px var(--mono); }
/* less room (a laptop, or the left sidebar open): Package, Leads and CSM leave the row; Health stays. A client's
   drawer holds them all */
@container (max-width: 1080px) {
  .ro .bd .tr { grid-template-columns: minmax(170px, 1.35fr) 84px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.05fr) minmax(0, .95fr) 86px; }
  .ro .bd .cells > .pkg, .ro .bd .cells > .lc, .ro .bd .cells > .csm, .ro .tr.head .cells > span:is(:nth-child(7), :nth-child(8), :nth-child(10)) { display: none; }
}
/* narrower still (a phone): a row is the client and its progress, with its set fields under them, each named */
@container (max-width: 860px) {
  .ro .tr.head { display: none; }
  .ro .bd .tr { grid-template-columns: minmax(0, 1fr) 92px; gap: 8px 10px; padding: 11px 14px; }
  .ro .bd .cells { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; }
  .ro .bd .cells > span, .ro .bd .cells > .pkg, .ro .bd .cells > .lc, .ro .bd .cells > .csm { display: inline-flex; align-items: center; gap: 5px; }
  .ro .bd .cells > .nil { display: none; }
  .ro .bd .cells > span::before { content: attr(data-l); font-size: 11px; font-weight: 400; color: var(--text3); }
}

/* A client: the drawer over the board, under the top bar. Its layer and its box come in once. */
.ro-scrim { position: fixed; inset: 44px 0 0; z-index: 20; display: flex; justify-content: flex-end; background: rgba(3, 7, 20, .55); }
.ro-drawer { width: min(980px, 100%); height: 100%; overflow: auto; padding: 18px 26px 40px; background: var(--bg); border-left: 1px solid var(--line2); box-shadow: var(--shadow); outline: 0; }
.ro .way { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ro .way > a:first-child { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 2px; border-radius: 7px; color: var(--text3); font-size: 13px; text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.ro .way > a:first-child:hover { background: var(--hover); color: var(--text); }
.ro .chead { display: flex; gap: 14px; align-items: center; }
.ro .chead h2 { margin: 0 0 4px; font: 700 23px var(--display); letter-spacing: -0.02em; color: var(--head); overflow-wrap: anywhere; text-wrap: balance; }
.ro-sub { display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: center; color: var(--text3); font-size: 13px; }
.ro .chead .av { width: 50px; height: 50px; border-radius: 13px; font-size: 17px; }
/* the classes a shared sheet already names (.act, .sub) carry the page's prefix here */
.ro-act { margin-left: auto; align-self: flex-start; position: relative; flex: none; }
.ro-act .primary svg.i:last-child { transform: rotate(90deg); transition: transform var(--t-fast); } .ro-act .primary[aria-expanded="true"] svg.i:last-child { transform: rotate(-90deg); }
.ro .amenu { position: absolute; right: 0; top: 42px; width: min(310px, calc(100vw - 32px)); z-index: 5; display: grid; padding: 6px; background: var(--raise); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); }
.ro .amenu button { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; border-radius: 8px; transition: background var(--t-fast); } .ro .amenu button:hover { background: var(--hover); }
.ro .amenu svg.i { margin-top: 2px; color: var(--blue); } .ro .amenu b { display: block; font-weight: 600; } .ro .amenu small { color: var(--text3); font-size: 12px; }
.ro .amenu .del { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; } .ro .amenu .del b, .ro .amenu .del svg.i { color: var(--bad); }
/* the drawer's tabs, under its head, as the owner's mock; the open one underlined */
.ro-tabs { display: flex; gap: 4px; margin: 18px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ro-tabs button { flex: none; padding: 10px 12px 11px; color: var(--text2); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast); }
.ro-tabs button:hover { color: var(--text); } .ro-tabs button[aria-selected="true"] { color: var(--head); font-weight: 600; border-bottom-color: var(--head); }
.ro-tabs button:focus-visible { outline-offset: -2px; }
/* Info: a narrow column of his three small cards beside the wide one */
.ro-info { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ro-col { display: grid; gap: 16px; min-width: 0; }
.ro-cd { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 4px 16px 10px; min-width: 0; }
.ro-cd h3 { display: flex; align-items: center; gap: 8px; margin: 0 -16px 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 14.5px var(--display); color: var(--head); }
.ro-cd h3 svg.i { width: 16px; height: 16px; color: var(--red); } .ro-cd h3 small { margin-left: auto; font: 400 12px var(--sans); color: var(--text3); text-align: right; }
.ro-cd.lbl h3 { border: 0; margin-bottom: 0; padding-bottom: 4px; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.ro-cd.lbl h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ro .kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 4px 0; font-size: 13px; min-width: 0; }
.ro .kv > span:first-child { color: var(--text2); flex: none; } .ro .kv b { font-weight: 600; text-align: right; overflow-wrap: anywhere; } .ro .kv b small { font-weight: 400; color: var(--text3); }
.ro .kv a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .ro .kv a:hover { text-decoration: underline; } .ro .kv a svg.i { width: 14px; height: 14px; }
.ro .kv .prog { min-width: 120px; } .ro .mono { font-family: var(--mono); font-size: 12.5px; }
.ro .kv .ro-csm { margin: -2px 0; min-width: 0; }  /* a control stands in its row at the row's own height */
.ro .kv .ro-pick select { max-width: min(250px, 56vw); }
.ro-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
/* a source the panel does not read yet: what it is and where it plugs in */
.ro-off { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--text2); font-size: 13px; }
.ro-cd .ro-off { margin: 8px 0 4px; } .ro-off svg.i { flex: none; margin-top: 1px; color: var(--text3); } .ro-off b { display: block; color: var(--text); margin-bottom: 2px; } .ro-off p { margin: 0; }
.ro-tab > .ro-off + .ro-off, .ro-tab > .ro-cd + .ro-off { margin-top: 16px; }
/* Offboard: a reason, the client's words, Save; what was saved above them */
.ro-offrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 4px; }
.ro-offrow .ro-pick select { padding-left: 13px; max-width: 250px; }
.ro-in { flex: 1; min-width: 180px; height: 30px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raise); font-size: 13px; }
.ro-said { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 2px; font-size: 13px; color: var(--text2); } .ro-said svg.i { flex: none; width: 15px; height: 15px; color: var(--ok); margin-top: 1px; }
.ro .ro-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .ro .ro-danger:hover:not(:disabled) { background: var(--bad-bg); }
.ro .ro-danger svg.i { width: 15px; height: 15px; } .ro .amenu .del + .del { border-top: 0; margin-top: 0; }
/* Health & early results: his gauge and chip beside the early figures */
.ro-hgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 8px 0 6px; }
.ro-hs { display: grid; justify-items: center; gap: 6px; } .ro-hs .bg, .ro-hs .fg { fill: none; stroke-width: 8; } .ro-hs .bg { stroke: var(--line); } .ro-hs .fg { stroke: var(--tc); stroke-linecap: round; }
.ro-hs text { fill: var(--head); font: 800 22px var(--display); }
.ro-early { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ro-early > div { display: grid; gap: 3px; align-content: start; }
.ro-early span { color: var(--text2); font-size: 12.5px; } .ro-early > div > b { font: 700 21px var(--mono); color: var(--head); } .ro-early > div > b.down { color: var(--bad); } .ro-early small { color: var(--text3); font-size: 11.5px; }
.ro-early .tg { justify-self: start; } .ro-hnote { margin: 6px 0; color: var(--text2); font-size: 13px; }
/* Website: the client's sites */
.ro .ro-sites .tr { grid-template-columns: minmax(0, 1.6fr) 56px 108px 150px 110px 140px; gap: 10px; padding: 10px 14px; font-size: 13px; }
.ro .ro-sites a { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; font-weight: 500; white-space: nowrap; } .ro .ro-sites a svg.i { width: 14px; height: 14px; }
/* Google Ads: the window's switch, his tiles, the keywords and the account's log */
.ro-adhd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.ro-tab > .stats { margin: 0 0 16px; } .ro-tab > .ro-cd + .ro-cd { margin-top: 16px; }
.ro .ro-kw { border: 0; border-radius: 0; margin: 0 -16px -10px; }
.ro .ro-kw .tr { grid-template-columns: minmax(0, 1.6fr) 130px 76px 60px 56px 76px; gap: 10px; padding: 9px 16px; font-size: 13px; } .ro .ro-kw .tr.head { white-space: nowrap; }
.ro .ro-kw b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ro .ro-kw .prog i::after { background: var(--blue); }
.ro-bad { color: var(--bad); font-size: 12.5px; font-weight: 600; }
.ro-adlog h4 { margin: 6px 0 4px; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
/* the change log: one entry per line, who and when under it */
.ro-ev { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 13px; } .ro-ev + .ro-ev { border-top: 1px solid var(--line); }
.ro-ev p { margin: 0 0 2px; color: var(--text); overflow-wrap: anywhere; } .ro-ev small { color: var(--text3); font-size: 12px; } .ro-ev .av { margin-top: 1px; }
.ro-feed { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 2px 16px; }
.ro-kind { display: inline-block; margin-right: 7px; padding: 0 7px; border-radius: 5px; background: var(--chip); color: var(--text2); font-size: 11px; font-weight: 600; line-height: 17px; }
.ro-note { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.ro-note textarea { flex: 1; min-height: 58px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--raise); font-size: 13.5px; resize: vertical; }
.ro-note textarea:focus-visible, .ro-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.ro-tab .empty { margin-top: 0; }

/* A form of the Action menu: GoHighLevel's own, framed in a box over the client */
.ro-modal { position: fixed; inset: 44px 0 0; z-index: 30; display: grid; place-items: center; background: rgba(3, 7, 20, .6); }
.ro .fbox { position: relative; width: min(680px, calc(100% - 32px)); height: min(720px, calc(100% - 40px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; background: var(--raise); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); outline: 0; }
.ro .fhd { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.ro .fhd b { font: 600 15px var(--display); color: var(--head); white-space: nowrap; } .ro .fhd span { flex: 1; min-width: 0; color: var(--text3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* what the form does after its submit, said before anything is typed */
.ro .fnote { grid-row: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--chip); color: var(--text2); font-size: 12.5px; }
.ro .fnote svg.i { width: 14px; height: 14px; color: var(--text3); }
.ro .fwait { grid-area: 3 / 1; align-self: center; justify-self: center; color: var(--text3); font-size: 13px; } .ro .fbox.in .fwait { display: none; }
.ro .fbox iframe { grid-area: 3 / 1; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; } .ro .fbox.in iframe { opacity: 1; }
/* Add client: a short form in the same box */
.ro .fbox.ro-addbox { width: min(560px, calc(100% - 32px)); height: auto; max-height: calc(100% - 40px); overflow-y: auto; grid-template-rows: auto auto auto; }
.ro-addf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px 18px 4px; }
.ro-addf label { display: grid; gap: 5px; color: var(--text2); font-size: 12.5px; font-weight: 500; } .ro-addf .wide { grid-column: 1 / -1; } .ro-addf small { color: var(--text3); font-weight: 400; }
.ro-addf .ro-in { width: 100%; height: 34px; color: var(--text); } .ro-addf .ro-bad { margin: 0; }
.ro-addf .ro-pick { width: 100%; height: 34px; border-radius: 8px; } .ro-addf .ro-pick select { width: 100%; max-width: none; field-sizing: fixed; padding-left: 12px; border-radius: 8px; }
.ro .ffoot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
/* the drawer's extras: the report's way out beside Action, Calls (Fathom), the automations in Change log, the GBP card */
.ro-act { display: flex; gap: 8px; align-items: center; } .ro-act > .btn { text-decoration: none; }
.ro-calls { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.ro-call + .ro-call { border-top: 1px solid var(--line); }
.ro-callrow { display: grid; grid-template-columns: 16px 104px minmax(0, 1.3fr) minmax(0, 1fr) 150px; gap: 12px; align-items: center; width: 100%; padding: 11px 16px; border: 0; background: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.ro-callrow:hover { background: var(--hover); } .ro-callrow > svg.i { width: 14px; height: 14px; color: var(--text3); transition: transform var(--t-fast); }
.ro-call.open .ro-callrow > svg.i { transform: rotate(90deg); } .ro-callrow .mono { color: var(--text2); font-size: 12px; }
.ro-callrow b, .ro-guests { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ro-guests { color: var(--text2); }
.ro-sum { padding: 2px 16px 14px 44px; font-size: 13px; color: var(--text2); } .ro-sum .md h2 { font-size: 13.5px; margin: 12px 0 4px; color: var(--head); }
.ro-sum > a { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; text-decoration: none; } .ro-sum > a svg.i { width: 14px; height: 14px; }
.ro-adhd .ro-bad { display: inline-flex; align-items: center; gap: 5px; } .ro-adhd .ro-bad svg.i, p.ro-bad svg.i { width: 14px; height: 14px; }
p.ro-bad { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.ro-auto > .av { background: var(--chip); color: var(--text2); border: 1px solid var(--line2); } .ro-auto > .av svg.i { width: 13px; height: 13px; }
.ro-tab > .ro-cd { margin-top: 14px; } .ro-cd .kv small.muted { margin-left: 6px; }

@media (max-width: 760px) {
  .page[data-page="roster"] { padding: 20px 16px 40px; }
  .ro .ph { flex-wrap: wrap; } .ro .ph-side { margin-left: 0; width: 100%; min-width: 0; } .ro .ph-side .search { flex: 1 1 100%; width: auto; min-width: 0; }
  .ro-drawer { padding: 14px 16px 32px; border-left: 0; }
  .ro .chead { flex-wrap: wrap; } .ro .chead > div:nth-child(2) { flex: 1; min-width: 0; } .ro .chead h2 { font-size: 20px; }
  .ro-act { margin-left: 0; width: 100%; } .ro .amenu { right: auto; left: 0; }
  .ro-callrow { grid-template-columns: 16px 92px minmax(0, 1fr); } .ro-callrow > .ro-guests, .ro-callrow > .who { display: none; } .ro-sum { padding-left: 16px; }
  .ro-info, .ro-two { grid-template-columns: minmax(0, 1fr); }
  .ro .ro-sites .tr { grid-template-columns: minmax(0, 1fr) auto; } .ro .ro-sites .tr > :nth-child(n+2):not(a) { display: none; } .ro .ro-sites .tr.head { display: none; }
  .ro .ro-kw .tr { grid-template-columns: minmax(0, 1fr) 70px 50px 70px; } .ro .ro-kw .tr > :nth-child(2), .ro .ro-kw .tr > :nth-child(4) { display: none; }
  .ro .fbox { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ro .ph-side { flex-wrap: wrap; } .ro-addf, .ro-hgrid, .ro-early { grid-template-columns: minmax(0, 1fr); }
}

/* The Action menu's sheets (ProjectManagement.md, Stage 5): whose form it is, what its submit starts, what the panel
   filled in; the Upsell's target area above the live form; the offboard form, the panel's own */
.ro .fbox { grid-template-rows: auto auto auto minmax(0, 1fr); height: min(780px, calc(100% - 40px)); }
.ro .fbox.own { height: auto; max-height: calc(100% - 40px); grid-template-rows: auto auto auto; }
.ro .fhd { align-items: flex-start; padding: 16px 14px 14px 22px; }
.ro .fhd .ftl { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ro .fhd .ftl small { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro .fhd .ftl b { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.ro .fhd .ftl b svg.i { width: 17px; height: 17px; color: var(--red); }
.ro .fmeta { grid-row: 2; display: grid; gap: 7px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--chip); }
.ro .fmeta p { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 0; border: 0; background: none; color: var(--text2); font-size: 12.5px; line-height: 1.45; }
.ro .fmeta svg.i { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--text3); }
.ro .fmeta .fstart { color: var(--text); font-weight: 500; } .ro .fmeta .fstart svg.i { color: var(--red); }
.ro .fmeta .fheld { color: var(--ok); } .ro .fmeta .fheld svg.i { color: var(--ok); }
.ro .farea { grid-row: 3; display: grid; gap: 9px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.ro .fah { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ro .fah b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--head); } .ro .fah b svg.i { width: 14px; height: 14px; color: var(--text3); }
.ro .fah small { flex: 1; color: var(--text3); font-size: 12px; }
.ro .farow { display: flex; gap: 8px; flex-wrap: wrap; } .ro .farow .ro-in.mi { flex: 0 0 96px; min-width: 0; }
.ro .fsaved { display: flex; align-items: center; gap: 7px; margin: 0; min-height: 18px; color: var(--text3); font-size: 12.5px; }
.ro .fsaved svg.i { width: 14px; height: 14px; color: var(--ok); } .ro .fsaved b { color: var(--text); font-weight: 600; }
.ro .fwait, .ro .fbox iframe { grid-area: 4 / 1; }
.ro .fown { grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 18px 22px 0; }
.ro .fown .fld { grid-column: 1 / -1; display: grid; gap: 7px; } .ro .fown .fld.half { grid-column: 1; }
.ro .fown .fld > span:first-child { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); }
.ro .fown .ro-in { height: 36px; min-width: 0; }
.ro .fown .ro-pick { height: 36px; border-radius: 8px; } .ro .fown .ro-pick select { max-width: none; width: 100%; padding-left: 12px; field-sizing: fixed; }
.ro .fown .fsaved, .ro .fown .ffoot { grid-column: 1 / -1; } .ro .fown .ffoot { margin: 0 -22px; padding: 14px 22px 16px; border-top: 1px solid var(--line); }
.ro .ro-area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.ro .ro-town { padding: 3px 10px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line2); color: var(--text); font-size: 12.5px; font-weight: 500; }
.ro .ffoot .btn, .ro .ffoot .primary { white-space: nowrap; }
/* a phone: the sheet takes the whole screen, over the top bar, its own close at the corner; the actions wrap, never their words */
@media (max-width: 760px) {
  .ro .fown { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ro-modal { inset: 0; z-index: 29; } .ro .fbox { height: 100%; }
  .ro .fbox.own { height: 100%; max-height: none; grid-template-rows: auto auto minmax(0, 1fr); overflow-y: auto; }
  .ro .fbox.ro-addbox { width: 100%; height: 100%; max-height: none; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .ro .ffoot { flex-wrap: wrap; }
}