/* Admin Suite v2 redesign: the design system (public/redesign.css). Ported from the approved draft-2 prototype (prototype/public/ui.css); loaded after app.css when REDESIGN=on, with .panel/.notice/.filters renamed rd-* so the older screens' own classes are untouched. Craig 10-28: OPC's logo and name; mostly white space with clean, modern lines; restrained colour taken from the logo. Type: the logo is an image (its Trajan Pro is not needed as a web font). OPC's documents use CG Omega, a licensed face; until a web licence is settled the stand-in is Tenor Sans (SIL Open Font Licence, self-hosted), used for headings and figures. Swapping in CG Omega is one change: --font-brand below. Written under the app's CSP (default-src 'self'): no inline styles or scripts, no outside fonts. */ @font-face { font-family: "Tenor Sans"; src: url("/static/TenorSans-Regular.ttf") format("truetype"); font-display: swap; } :root { --font-brand: "CG Omega", "Tenor Sans", Optima, Candara, sans-serif; --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --navy: #094a70; /* logo, OUTSTANDING */ --steel: #2e729b; /* logo, PET CARE */ --navy-soft: #eef4f8; --ink: #17232c; --ink-2: #4b5862; --muted: #7d8a94; --rule: #e4e9ed; --rule-2: #f0f3f5; --bg: #ffffff; --ok: #1f7a52; --warn: #a3650f; --bad: #b3402c; --quiet: #7d8a94; --own: #4a3d74; --own-bg: #f6f4fa; --side: 232px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 15px/1.55 var(--font-text); color: var(--ink); background: var(--bg); } a { color: var(--navy); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } h1, h2, h3 { font-family: var(--font-brand); font-weight: 400; margin: 0; letter-spacing: .01em; line-height: 1.25; color: var(--ink); } h1 { font-size: 1.85rem; } h2 { font-size: 1.18rem; } h3 { font-size: 1rem; } .h3s { font-family: var(--font-text); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .6rem; } p { margin: .4rem 0; } .muted { color: var(--muted); } .small { font-size: .86rem; } .tiny { font-size: .76rem; } .mt { margin-top: 1.5rem; } .mt-s { margin-top: .5rem; } .grow { flex: 1; min-width: 0; } .scrollx { overflow-x: auto; } .ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; } form.inline { display: inline; margin: 0; } /* ---- shell ---- */ .shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; background: linear-gradient(to right, transparent calc(var(--side) - 1px), var(--rule) calc(var(--side) - 1px), var(--rule) var(--side), transparent var(--side)); } .side { position: sticky; top: 0; height: 100vh; padding: 1.6rem 1.1rem 1.2rem; display: flex; flex-direction: column; background: #fff; } .logo img { display: block; width: 190px; height: auto; } .org { margin: .7rem 0 1.6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .navs { display: flex; flex-direction: column; gap: .1rem; } .nav { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; color: var(--ink-2); border-left: 2px solid transparent; } .nav:hover { color: var(--navy); text-decoration: none; } .nav.on { color: var(--navy); border-left-color: var(--navy); font-weight: 600; } .me { margin-top: auto; font-size: .85rem; border-top: 1px solid var(--rule); padding-top: .9rem; } .main { min-width: 0; } .topbar { display: flex; align-items: center; gap: 1rem; padding: .85rem 2.2rem; border-bottom: 1px solid var(--rule); } .crumbs { color: var(--muted); font-size: .88rem; } .crumbs a { color: var(--muted); } .spacer { flex: 1; } .search { display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--rule); padding: .2rem .1rem; min-width: 17rem; color: var(--muted); } .search input { border: 0; font: inherit; outline: none; width: 100%; color: var(--ink); background: transparent; } .proto { font-size: .72rem; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: .12rem .6rem; white-space: nowrap; } .content { padding: 2rem 2.2rem 3rem; max-width: 1280px; } .phone-top, .tabbar { display: none; } .head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.6rem; } .head .t { flex: 1; min-width: 16rem; } .sub { color: var(--muted); margin-top: .35rem; max-width: 52rem; } .actions { display: flex; flex-wrap: wrap; gap: .5rem; } .ch { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .8rem; } .ch h2 { flex: none; } .section-h { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-weight: 500; cursor: pointer; border-radius: 3px; line-height: 1.2; } .btn:hover { background: #073a59; text-decoration: none; } .btn.ghost { background: #fff; color: var(--navy); border-color: var(--rule); } .btn.ghost:hover { border-color: var(--navy); } .btn.quiet { background: none; border-color: transparent; color: var(--muted); padding: .2rem .4rem; font-size: .84rem; } .btn.quiet:hover { color: var(--navy); } .btn.small { padding: .28rem .7rem; font-size: .84rem; } .btn.big { padding: .85rem 1.2rem; font-size: 1.04rem; } .btn.block { width: 100%; justify-content: center; } /* ---- status: a word, with a small coloured mark ---- */ .pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--ink-2); } .pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--quiet); } .pill.ok::before { background: var(--ok); } .pill.warn::before { background: var(--warn); } .pill.bad::before { background: var(--bad); } .pill.bad { color: var(--bad); } .pill.warn { color: var(--warn); } .flag { font-size: .8rem; color: var(--bad); font-weight: 600; } .chg { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .chg.up { color: var(--ok); } .chg.down { color: var(--bad); } .chg.flat { color: var(--muted); font-weight: 500; } .due-over, .poor { color: var(--bad); } .tag { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule); padding: 0 .35rem; border-radius: 2px; } .vis-owner_only { color: var(--own); border-color: #d8d1ea; } .vis-client { color: var(--steel); border-color: #c7dbe8; } sup.dq { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--warn); color: var(--warn); font-size: .66rem; font-weight: 700; margin-left: .25rem; vertical-align: .55em; font-family: var(--font-text); } /* ---- summary numbers ---- */ .stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 1.6rem; } .stats > div { flex: 1; min-width: 9rem; padding: .9rem 1.2rem .9rem 0; } .stats > div + div { border-left: 1px solid var(--rule); padding-left: 1.2rem; } .stats .k, .kpis3 .k { display: block; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .stats .v, .kpis3 .v { display: block; font-family: var(--font-brand); font-size: 1.7rem; color: var(--navy); font-variant-numeric: tabular-nums; } .stats .v.small-v { font-size: 1.1rem; padding-top: .45rem; } .kpis3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .kpis3 > div { padding: 1rem 1.2rem 1rem 0; } .kpis3 > div + div { border-left: 1px solid var(--rule); padding-left: 1.2rem; } .kpis3 .d { display: block; font-size: .84rem; color: var(--muted); } /* ---- staff list ---- */ .rd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin-bottom: 1rem; } .seg { display: inline-flex; gap: 1.2rem; border-bottom: 1px solid var(--rule); } .seg a { padding: .35rem 0; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .92rem; white-space: nowrap; } .seg a.on { color: var(--navy); border-bottom-color: var(--navy); } .seg a:hover { text-decoration: none; color: var(--navy); } .seg.small-seg { gap: .9rem; margin-left: auto; } .seg.small-seg a { font-size: .8rem; } .seg.wrap { flex-wrap: wrap; margin-bottom: 1rem; } .board { border-top: 1px solid var(--ink); } .board .row { display: grid; grid-template-columns: minmax(13rem, 1.35fr) minmax(11rem, 1.05fr) minmax(6rem, .5fr) repeat(3, minmax(8.5rem, 1fr)) minmax(8rem, .8fr); gap: 1.1rem; padding: 1rem .2rem; border-bottom: 1px solid var(--rule); align-items: start; color: inherit; } .board a.row:hover { background: #fafcfd; text-decoration: none; } .board .hdr { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .55rem .2rem; } .co-name { font-family: var(--font-brand); font-size: 1.06rem; color: var(--navy); } .co-meta { color: var(--muted); font-size: .8rem; margin-top: .15rem; } .rev .yoy { display: flex; flex-direction: column; } .rev .yoy .chg { font-size: 1.15rem; font-family: var(--font-brand); font-weight: 400; } .rev .yoy small { color: var(--muted); font-size: .74rem; } .m3 { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .78rem; color: var(--muted); margin-top: .3rem; } .m3 .chg { font-weight: 500; } .m3 .miss { color: var(--bad); } .tc .why { font-size: .8rem; color: var(--ink-2); margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lname { display: none; } .board table.tbl { border-top: 0; } /* ---- client page ---- */ .co-head { padding: 1.7rem 2.2rem 0; border-bottom: 1px solid var(--rule); } .co-head .top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .co-head .title { flex: 1; min-width: 16rem; } .co-head h1 { font-size: 2.1rem; color: var(--navy); } .journey { list-style: none; display: flex; margin: 1.4rem 0 .4rem; padding: 0; overflow-x: auto; } .journey li { flex: 1; min-width: 7.5rem; position: relative; padding-top: 1.1rem; font-size: .8rem; color: var(--muted); } .journey li::before { content: ""; position: absolute; top: .35rem; left: 0; right: 0; height: 1px; background: var(--rule); } .journey .jd { position: absolute; top: 0; left: 0; width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid var(--muted); background: #fff; } .journey .done .jd { background: var(--steel); border-color: var(--steel); } .journey .now .jd { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); } .journey .next .jd { border-color: var(--warn); border-width: 2px; } .journey .jl { display: block; color: var(--ink); } .journey .now .jl { color: var(--navy); font-weight: 600; } .journey .next .jt { color: var(--warn); font-weight: 600; } .journey .jt { display: block; font-size: .74rem; } .tabs { display: flex; gap: 1.6rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; } .tabs a { padding: .6rem 0; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: .92rem; } .tabs a.on { color: var(--navy); border-bottom-color: var(--navy); } .tabs a:hover { text-decoration: none; color: var(--navy); } .owner-band { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: baseline; background: var(--own-bg); border-left: 2px solid var(--own); padding: .7rem 1rem; margin-bottom: 1.8rem; font-size: .88rem; } .owner-band .ob-k { color: var(--own); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .owner-band em { font-style: normal; color: #7c7299; font-size: .76rem; margin-right: .3rem; } .owner-band .ob-risk { flex-basis: 100%; } .rev-block { margin-bottom: .5rem; } .rev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.4rem; align-items: start; } .mx { width: 100%; border-collapse: collapse; } .mx th, .mx td { text-align: left; padding: .7rem .6rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .mx thead th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom-color: var(--ink); } .mx tbody th { font-weight: 500; font-size: .9rem; color: var(--ink-2); width: 30%; } .mx tbody th small { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; } .mx-cell { display: block; color: inherit; } .mx-cell:hover { text-decoration: none; } .mx-cell:hover .mx-v { color: var(--steel); } .mx-v { display: block; font-family: var(--font-brand); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; } .mx .lead .mx-v { font-size: 1.45rem; color: var(--navy); } .mx-ly { display: block; font-size: .76rem; color: var(--muted); } .mx-miss span { display: block; color: var(--bad); font-size: .84rem; } .mx-miss a { font-size: .8rem; } .dq-notes { margin-top: .6rem; font-size: .8rem; color: var(--ink-2); } .chart { width: 100%; height: auto; display: block; } .chart .ax { font-size: 11px; fill: #8d99a2; font-family: var(--font-text); } .chart a circle { cursor: pointer; } .chart a:hover circle { r: 6; } .legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .78rem; color: var(--ink-2); margin-top: .3rem; } .legend .ln::before { content: ""; display: inline-block; width: 1.1rem; height: 0; border-top: 2px solid var(--navy); margin-right: .4rem; vertical-align: middle; } .legend .ly::before { border-top: 1px solid #b9c3ca; } .legend .bl::before { border-top: 1px dashed var(--steel); } .tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; } /* minmax(0, 1fr), and min-width: 0 below: a plain 1fr column grows to its widest line, which put a phone's client page 60-90 px past the screen (walk-phone 2026-10-30, companies 182, 387, 390). */ .tracks.established { grid-template-columns: minmax(0, 1fr); } .track { padding: .2rem 0 1rem; min-width: 0; } .tracks.early .track + .track { border-left: 1px solid var(--rule); padding-left: 2rem; } .tracks.established .track { border-bottom: 1px solid var(--rule); padding-bottom: 1.2rem; margin-bottom: .2rem; } .th { display: flex; align-items: center; gap: 1rem; } .tn { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .tsum { color: var(--ink); } .tsum.big { font-family: var(--font-brand); font-size: 1.12rem; margin: .35rem 0 .5rem; color: var(--navy); } details.track.compact { border-bottom: 1px solid var(--rule); padding: 0; } details.track.compact > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; padding: .85rem 0; } details.track.compact > summary::-webkit-details-marker { display: none; } details.track.compact > summary::after { content: "Open"; margin-left: auto; font-size: .78rem; color: var(--steel); } details.track.compact[open] > summary::after { content: "Close"; } details.track.compact .tsum { font-size: .9rem; color: var(--ink-2); } details.track.compact[open] { padding-bottom: 1rem; } .tlines { list-style: none; margin: 0; padding: 0; } .tlines li { display: flex; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--rule-2); font-size: .9rem; } .tlines li span { flex: 1; min-width: 0; } .src { font-size: .74rem; color: var(--steel); white-space: nowrap; } .tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .8rem; color: var(--muted); margin-top: .5rem; } details.fixer > summary { list-style: none; cursor: pointer; color: var(--steel); } details.fixer > summary::-webkit-details-marker { display: none; } details.fixer form { margin-top: .4rem; width: 100%; } details.fixer { flex-basis: 100%; } .note { border-left: 2px solid #e2c46a; background: #fffcf1; padding: .45rem .7rem; font-size: .88rem; margin: .5rem 0; } .note .by { font-size: .74rem; color: #8a7425; } .split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; } .stack > * + * { margin-top: 2rem; } .rd-panel { border-top: 1px solid var(--rule); padding-top: 1.1rem; } .rd-panel + .rd-panel { margin-top: 2rem; } .needs { list-style: none; margin: 0; padding: 0; } .needs li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--rule-2); } .needs .nk { width: 8.5rem; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--steel); font-weight: 600; flex: none; } .needs li.handled { color: var(--muted); } .needs li.handled .grow { text-decoration: line-through; text-decoration-color: #c7d0d6; } .needs .by { display: block; text-decoration: none; font-size: .76rem; color: var(--ok); } .list { list-style: none; margin: 0; padding: 0; } .list li { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule-2); } .list .w { min-width: 4.5rem; font-size: .8rem; color: var(--muted); } .precall { margin: 0; padding-left: 1.1rem; } .precall li { margin: .45rem 0; } .precall li:first-child { font-weight: 500; color: var(--navy); } .check { list-style: none; margin: .6rem 0 0; padding: 0; } .check li { display: flex; gap: .6rem; padding: .35rem 0; font-size: .9rem; } .check li.ok .ico { color: var(--ok); } .check li.todo .ico { color: var(--warn); } .check small { display: block; color: var(--muted); font-size: .76rem; } /* ---- timeline ---- */ .tl { list-style: none; margin: 0; padding: 0; position: relative; max-width: 52rem; } .tl::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); } .tl li { position: relative; padding: 0 0 1.1rem 2.7rem; scroll-margin-top: 5rem; } .tl .day { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-bottom: .5rem; } .tl .dot { position: absolute; left: 0; top: 0; width: 29px; height: 29px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--steel); } .tl .dot svg { width: 15px; height: 15px; } .tl .box { border-bottom: 1px solid var(--rule-2); padding-bottom: .7rem; } .tl li:target .box { border-bottom-color: var(--navy); } .tl li:target .ttl { color: var(--navy); } .tl .meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .76rem; color: var(--muted); align-items: center; } .tl .ttl { font-weight: 500; margin-top: .15rem; } .tl .body { color: var(--ink-2); font-size: .9rem; } /* ---- tables ---- */ .tbl { width: 100%; border-collapse: collapse; font-size: .9rem; } .tbl th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--ink); } .tbl td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; font-variant-numeric: tabular-nums; } .tbl td.n, .tbl th.n { text-align: right; } .tbl tfoot td { font-weight: 600; border-top: 1px solid var(--ink); border-bottom: 0; } .rlist { list-style: none; margin: 0; padding: 0; } .rlist li { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule-2); } .rlist span { color: var(--muted); font-size: .88rem; } /* ---- client home ---- */ .hello { margin-bottom: 1.6rem; } .hello h1 { color: var(--navy); font-size: 2.1rem; } .rd-notice { display: flex; align-items: center; gap: .8rem; border-left: 2px solid var(--warn); background: #fffaf1; padding: .7rem 1rem; margin-bottom: 1.6rem; } .areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: 2.2rem; } .area { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.4rem 1.2rem 0; color: inherit; } .area + .area { border-left: 1px solid var(--rule); padding-left: 1.4rem; } .area:hover { text-decoration: none; } .area:hover .ak { color: var(--steel); } .ak { font-family: var(--font-brand); font-size: 1.3rem; color: var(--navy); } .av { color: var(--ink); } .ad { color: var(--muted); font-size: .84rem; } .months { display: flex; flex-wrap: wrap; gap: .6rem 2rem; } .month { display: flex; flex-direction: column; gap: .1rem; min-width: 9rem; padding: .4rem 0; color: inherit; border-bottom: 1px solid var(--rule); } .month.missing { border-bottom-color: var(--bad); } .month .mn { font-family: var(--font-brand); } /* ---- Revenue Road ---- */ .road-stage { border-top: 1px solid var(--rule); } .road-stage > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1rem 0; } .road-stage > summary::-webkit-details-marker { display: none; } .rs-n { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--navy); color: var(--navy); display: grid; place-items: center; font-family: var(--font-brand); flex: none; } .rs-t { flex: 1; font-family: var(--font-brand); font-size: 1.15rem; color: var(--navy); } .rs-t small { display: block; font-family: var(--font-text); font-size: .82rem; color: var(--muted); } .rs-p { font-size: .82rem; color: var(--muted); } .road-items { list-style: none; margin: 0 0 1rem 3rem; padding: 0; } .road-items li { display: flex; gap: .9rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule-2); } .road-items small { display: block; color: var(--muted); font-size: .78rem; } .ri-play { width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; flex: none; } .ri-play .ico { width: 14px; height: 14px; } .req { display: inline-block; margin-left: .6rem; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); font-weight: 600; } .ri-s { font-size: .8rem; color: var(--muted); min-width: 4rem; text-align: right; } .ri-s.ok { color: var(--ok); } .ri-s.part { color: var(--steel); } .acc details, .acc-plain { border-bottom: 1px solid var(--rule-2); } .acc summary, .acc-plain summary { cursor: pointer; padding: .6rem 0; } .acc summary small, .acc-plain summary small { color: var(--muted); margin-left: .6rem; } .files { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 1rem; } .files li { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; font-size: .9rem; } .files .ico { color: var(--steel); } .player { aspect-ratio: 16 / 9; background: var(--navy); color: #fff; display: grid; place-items: center; } .player .play { width: 48px; height: 48px; } /* ---- forms ---- */ input.i, select.i, textarea.i { width: 100%; padding: .5rem .6rem; font: inherit; border: 1px solid #cfd8de; border-radius: 3px; background: #fff; color: var(--ink); } input.i:focus, select.i:focus, textarea.i:focus { border-color: var(--steel); outline: none; box-shadow: 0 0 0 3px #e3eef5; } textarea.i { min-height: 4rem; } .entry { border-top: 1px solid var(--rule); } .entry > summary { list-style: none; cursor: pointer; display: flex; padding: .9rem 0; font-family: var(--font-brand); font-size: 1.1rem; color: var(--navy); } .entry > summary::-webkit-details-marker { display: none; } .entry .sum { margin-left: auto; font-family: var(--font-text); font-size: .9rem; color: var(--muted); } .entry .rows { padding-bottom: .8rem; } .erow { display: grid; grid-template-columns: 1fr 10rem 11rem; gap: 1rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--rule-2); } .erow label small { display: block; color: var(--muted); font-size: .76rem; } .erow input { text-align: right; font-variant-numeric: tabular-nums; } .erow .ly { font-size: .78rem; color: var(--muted); text-align: right; } .erow .delta { display: block; } .savebar { position: sticky; bottom: 0; background: rgba(255,255,255,.97); border-top: 1px solid var(--ink); padding: .8rem 0; display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } .savebar .tot { flex: 1; } .warnbox { border-left: 2px solid var(--warn); background: #fffaf1; padding: .7rem 1rem; margin: 1rem 0; } .okbox { border-left: 2px solid var(--ok); background: #f3faf6; padding: .7rem 1rem; margin: 1rem 0; } .toast { border-left: 2px solid var(--navy); background: var(--navy-soft); padding: .7rem 1rem; margin-bottom: 1.4rem; display: flex; gap: .6rem; align-items: center; } /* ---- front desk ---- */ .desk { max-width: 34rem; margin: 0 auto; } .daycard { text-align: center; border-top: 0; } .dt { font-family: var(--font-brand); font-size: 1.5rem; color: var(--navy); } .ready { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--ok); border-radius: 3px; padding: .8rem 1rem; margin: 1rem 0; color: inherit; } .ready small { display: block; color: var(--muted); } .ready .ico { color: var(--ok); } .dropzone { display: flex; flex-direction: column; align-items: center; gap: .4rem; border: 1px dashed #b8c4cc; padding: 1.4rem; text-align: center; cursor: pointer; color: var(--navy); } .dropzone input { max-width: 100%; } .sheetimg { width: 100%; border: 1px solid var(--rule); display: block; } .readrow { display: grid; grid-template-columns: 1fr 6rem; gap: .6rem; align-items: center; padding: .35rem 0; border-top: 1px solid var(--rule-2); } .readrow small { display: block; color: var(--warn); font-size: .74rem; font-weight: 600; } .readrow input { text-align: center; } .readrow.check input { border-color: var(--warn); background: #fffaf1; } .strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: .3rem; } .strip span { text-align: center; font-size: .76rem; padding: .3rem 0; border-bottom: 2px solid var(--rule); color: var(--muted); } .strip span.done { border-bottom-color: var(--steel); } .strip span.miss { border-bottom-color: var(--bad); color: var(--bad); } /* ---- persona picker ---- */ .pick { max-width: 62rem; margin: 4rem auto; padding: 0 1.4rem; } .pick-logo { display: block; width: 320px; max-width: 100%; height: auto; margin-bottom: 2rem; } .pick h1 { color: var(--navy); } .lead { color: var(--ink-2); max-width: 46rem; } .grid { display: grid; gap: 0 2rem; } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .persona { display: block; border-top: 1px solid var(--rule); padding: 1rem 0 1.4rem; color: inherit; } .persona:hover { text-decoration: none; border-top-color: var(--navy); } .pn { font-family: var(--font-brand); font-size: 1.2rem; color: var(--navy); } .pt { font-size: .84rem; color: var(--steel); } .pb { font-size: .88rem; color: var(--ink-2); margin-top: .3rem; } /* ---- narrower screens ---- */ @media (max-width: 1150px) { .board .row { grid-template-columns: minmax(12rem, 1.4fr) minmax(10rem, 1fr) minmax(5rem, .5fr) repeat(3, minmax(7rem, 1fr)); } .board .row > .nx { display: none; } .rev-grid, .split { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 760px) { .shell { display: block; background: none; } .req { display: block; margin: .1rem 0 0; font-size: .64rem; } .side, .topbar { display: none; } .phone-top { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: #fff; z-index: 6; } .phone-top img { width: 150px; height: auto; } .phone-top a { font-size: .84rem; } .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--rule); z-index: 6; padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 0 .45rem; font-size: .66rem; color: var(--muted); } .tabbar a.on { color: var(--navy); } .tabbar .ico { width: 21px; height: 21px; } .content { padding: 1.2rem 1rem 5.5rem; } h1 { font-size: 1.5rem; } .hello h1, .co-head h1 { font-size: 1.6rem; } .sub { font-size: .9rem; } .co-head { padding: 1.2rem 1rem 0; } .co-head .actions .btn { padding: .35rem .6rem; font-size: .82rem; } .board .row.hdr { display: none; } .board .row { display: block; padding: 1rem 0; } .board .row > div + div { margin-top: .45rem; } .board .row > .tc { display: flex; align-items: center; gap: .6rem; } .board .row > .tc .why { display: none; } .lname { display: inline; width: 5.5rem; font-size: .76rem; color: var(--muted); } .board .row > .mm::before { content: "Missing: "; font-size: .76rem; color: var(--muted); } .rev .yoy { flex-direction: row; align-items: baseline; gap: .6rem; } .stats > div { min-width: 45%; flex: 1 1 45%; padding: .6rem 0; } .stats > div + div { border-left: 0; padding-left: 0; } .stats .v { font-size: 1.35rem; } .kpis3 { grid-template-columns: 1fr; } .kpis3 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-2); } .tracks, .tracks.early { grid-template-columns: minmax(0, 1fr); } .tracks.early .track + .track { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; } .areas { grid-template-columns: 1fr; } .area + .area { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } .mx thead th, .mx tbody th { font-size: .74rem; } .mx-v { font-size: 1rem; } .mx .lead .mx-v { font-size: 1.15rem; } .mx-ly .chg { display: block; } .rlist li { grid-template-columns: 1fr; gap: .1rem; } .erow { grid-template-columns: 1fr 8rem; } .erow .ly { grid-column: 1 / -1; text-align: left; margin-top: -.3rem; } .savebar { bottom: 3.6rem; } .needs .nk { width: auto; flex-basis: 100%; } .road-items { margin-left: 0; } .g3 { grid-template-columns: 1fr; } .search, .seg.small-seg { display: none; } .strip { grid-template-columns: repeat(10, 1fr); } .journey li { min-width: 6.4rem; } } @media print { .side, .topbar, .tabbar, .phone-top, .actions, .savebar, .proto { display: none !important; } .shell { display: block; } } /* ---- inside the app: the older screens render in the new shell ---- */ body.rd main.rd-main { max-width: 1280px; margin: 0; padding: 2rem 2.2rem 3rem; } body.rd .card { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 1rem 0; background: none; } body.rd button, body.rd .button { border-radius: 3px; background: var(--navy); } body.rd .rd-pending { color: var(--muted); font-size: .86rem; border-left: 2px solid var(--rule); padding-left: .8rem; } body.rd .view-as-banner { background: #fff4d6; padding: .5rem 1rem; font-size: .88rem; } .nav .count { margin-left: auto; font-size: .72rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 0 .45rem; } .navs .sect { margin: 1rem .6rem .2rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .me form { margin: 0; } .me button { background: none; color: var(--navy); border: 0; padding: 0; font-size: .76rem; cursor: pointer; } @media (max-width: 760px) { body.rd main.rd-main { padding: 1.2rem 1rem 5.5rem; } } .co-head-in { border-bottom: 1px solid var(--rule); margin: -2rem -2.2rem 1.8rem; padding: 1.7rem 2.2rem 0; } .co-title { font-size: 2.1rem; color: var(--navy); } .section-h0 { margin-bottom: .4rem; } body.rd .search { min-width: 14rem; } @media (max-width: 760px) { .co-head-in { margin: -1.2rem -1rem 1.4rem; padding: 1.2rem 1rem 0; } .co-title { font-size: 1.6rem; } } body.rd nav.navs { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: .1rem; } body.rd nav.tabbar { margin: 0; } body.rd .me button { background: none; color: var(--navy); border: 0; padding: 0; font-size: .78rem; width: auto; } body.rd .view-as-banner { color: var(--ink); background: #fff4d6; border-left: 2px solid var(--warn); margin-bottom: 1.2rem; } body.rd .view-as-banner strong { color: var(--ink); } body.rd .view-as-banner button { background: var(--navy); color: #fff; padding: .2rem .7rem; font-size: .8rem; margin-left: .6rem; } /* the shell's
/