/* ZonePulse customer portal. * * Themes have three states, not two. An explicit choice stamps * data-theme on ; the default "system" setting stamps nothing, and * only prefers-color-scheme separates light from dark. So: :root carries * the complete light palette, the media query redefines the tokens for * system-dark but is guarded so an explicit light choice still wins, and * [data-theme=dark] redefines them again so the chooser wins either way. * * Every colour is a token. A colour defined only inside a media block * would never apply in the un-stamped state, which is how a page ends up * rendering one theme's text on the other theme's background. * * There is no JavaScript here, and none anywhere in this application: * the vhost sends script-src 'none'. The theme chooser is a link that * sets a cookie server-side. */ :root{ --paper:#F7F8FA;--surface:#fff;--sunken:#EEF1F5;--ink:#131820;--soft:#3A4552; --muted:#616E7D;--rule:#D8DEE6;--rule-soft:#E8ECF1; --accent:#1F4E79;--accent-lift:#2C6CA5;--wash:#E9F0F7; --ok:#1C6B45;--ok-wash:#E6F2EC;--no:#8E2F22;--no-wash:#FBEBE8; --shadow:0 1px 2px rgba(19,24,32,.05),0 8px 22px -16px rgba(19,24,32,.32); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#0D1116;--surface:#151A21;--sunken:#1B222B;--ink:#E5EAF0;--soft:#BFC8D3; --muted:#8A96A4;--rule:#28313C;--rule-soft:#1E2630; --accent:#7FB0DF;--accent-lift:#9CC6EC;--wash:#152232; --ok:#63C795;--ok-wash:#122419;--no:#E28579;--no-wash:#2A1614; --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px -18px rgba(0,0,0,.8); } } :root[data-theme="dark"]{ --paper:#0D1116;--surface:#151A21;--sunken:#1B222B;--ink:#E5EAF0;--soft:#BFC8D3; --muted:#8A96A4;--rule:#28313C;--rule-soft:#1E2630; --accent:#7FB0DF;--accent-lift:#9CC6EC;--wash:#152232; --ok:#63C795;--ok-wash:#122419;--no:#E28579;--no-wash:#2A1614; --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 26px -18px rgba(0,0,0,.8); } :root{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--accent-lift);text-underline-offset:.15em} :focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px;border-radius:2px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------------------------------------------------------- chrome -- */ .bar{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap; background:var(--surface);border-bottom:1px solid var(--rule);padding:.7rem 1.4rem} .brand{font-weight:700;letter-spacing:-.01em;color:var(--accent-lift)} .bar nav{display:flex;gap:1.1rem;flex:1;flex-wrap:wrap} .bar nav a{color:var(--soft);text-decoration:none;font-weight:500;padding:.2rem 0; border-bottom:2px solid transparent} .bar nav a:hover{color:var(--accent-lift);border-bottom-color:var(--accent-lift)} .who{display:flex;gap:.85rem;align-items:center;font-size:.87rem;color:var(--muted);flex-wrap:wrap} .who a{color:var(--muted);text-decoration:none}.who a:hover{color:var(--accent-lift)} /* theme chooser: three links, the active one marked. No script. */ .theme{display:inline-flex;border:1px solid var(--rule);border-radius:5px;overflow:hidden} .theme a{padding:.2rem .5rem;font-size:.72rem;font-weight:600;letter-spacing:.02em; color:var(--muted);text-decoration:none;background:var(--paper);line-height:1.5} .theme a+a{border-left:1px solid var(--rule)} .theme a[aria-current="true"]{background:var(--accent);color:#fff} :root[data-theme="dark"] .theme a[aria-current="true"]{color:#0D1116} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme a[aria-current="true"]{color:#0D1116}} main{max-width:74rem;margin:0 auto;padding:1.8rem 1.4rem 4rem} h1{font-size:1.5rem;letter-spacing:-.012em;margin:0 0 1.1rem} h2{font-size:1.08rem;margin:2rem 0 .6rem} .note{color:var(--muted);font-size:.9rem;max-width:70ch;margin:0 0 1rem} .empty{color:var(--muted);background:var(--surface);border:1px dashed var(--rule); border-radius:6px;padding:1.6rem;text-align:center} /* ----------------------------------------------------------- tiles -- */ .tiles{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule); border-radius:7px;overflow:hidden;margin:0 0 1.4rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))} .tile{background:var(--surface);padding:.95rem 1.05rem} .tile.crit{background:var(--no-wash)} .tile dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem} .tile dd{margin:0;font-size:1.5rem;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .tile dd small{font-size:.62em;font-weight:500;color:var(--muted)} .tile p{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)} /* ---------------------------------------------------------- tables -- */ /* The CDR table is nine columns of dense figures. Squeezing that onto a phone by hiding columns would hide the one someone came to check, so it scrolls inside its own box instead and the page never does. */ /* The shadow at an edge appears only when there is more table beyond it, which a fixed line of text cannot do without JavaScript. The two "local" layers scroll with the content and cover the shadows when you reach an end; the two "scroll" layers stay put underneath. */ .tw{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--rule);border-radius:7px;background:var(--surface); box-shadow:var(--shadow);margin:0 0 1.2rem; background-image: linear-gradient(to right, var(--surface), transparent), linear-gradient(to left, var(--surface), transparent), linear-gradient(to right, rgba(90,110,130,.28), transparent), linear-gradient(to left, rgba(90,110,130,.28), transparent); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:28px 100%,28px 100%,12px 100%,12px 100%; background-attachment:local,local,scroll,scroll} .tw table{border:0;border-radius:0;box-shadow:none;margin:0} table{width:100%;border-collapse:collapse;background:var(--surface); border:1px solid var(--rule);border-radius:7px;overflow:hidden;font-size:.88rem; box-shadow:var(--shadow);margin:0 0 1.2rem} th,td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--rule-soft); white-space:nowrap} td.wrap{white-space:normal;min-width:14rem} thead th{background:var(--sunken);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);font-weight:600} tbody tr:last-child td{border-bottom:0} td.n,th.n{text-align:right;font-variant-numeric:tabular-nums} td.m{font-family:var(--mono);font-size:.85em} td.neg{color:var(--no)} td.pos{color:var(--ok)} table.kv{max-width:32rem} table.kv th{width:11rem;background:var(--sunken)} table.kv th,table.kv td{white-space:normal;overflow-wrap:anywhere} .ok{color:var(--ok);background:var(--ok-wash);border:1px solid var(--ok); border-radius:3px;padding:.1rem .35rem;font-size:.72rem;font-weight:600} .no{color:var(--no);background:var(--no-wash);border:1px solid var(--no); border-radius:3px;padding:.1rem .35rem;font-size:.72rem;font-weight:600;font-family:var(--mono)} /* ----------------------------------------------------------- forms -- */ form.filter{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap; background:var(--surface);border:1px solid var(--rule);border-radius:7px; padding:.9rem 1rem;margin:0 0 1rem} label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:var(--muted);font-weight:600} input{font:inherit;font-size:1rem;padding:.5rem .6rem;border:1px solid var(--rule); border-radius:5px;background:var(--paper);color:var(--ink);min-width:9rem} button,.btn{font:inherit;font-size:.9rem;font-weight:600;padding:.55rem 1rem;border-radius:5px; border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer; text-decoration:none;display:inline-block;text-align:center;min-height:2.6rem;line-height:1.5} :root[data-theme="dark"] button,:root[data-theme="dark"] .btn{color:#0D1116} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) button, :root:not([data-theme="light"]) .btn{color:#0D1116}} .btn{background:transparent;color:var(--accent-lift)} :root[data-theme="dark"] .btn{color:var(--accent-lift);background:transparent} button:hover{background:var(--accent-lift);border-color:var(--accent-lift)} form.stack{display:flex;flex-direction:column;gap:.7rem;max-width:22rem; background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:1.1rem} .signin{max-width:20rem;margin:5rem auto;background:var(--surface);border:1px solid var(--rule); border-radius:9px;padding:1.8rem;box-shadow:var(--shadow)} .signin h1{margin:0;color:var(--accent-lift)} .signin .lede{margin:.1rem 0 1.3rem;color:var(--muted);font-size:.9rem} .signin form{display:flex;flex-direction:column;gap:.75rem} .signin input{min-width:0;width:100%} .fine{margin:1.1rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.5} .flash{padding:.6rem .9rem;border-radius:5px;margin:0 0 1rem;font-size:.9rem;border:1px solid} .flash.ok{background:var(--ok-wash);border-color:var(--ok);color:var(--ok)} .flash.err{background:var(--no-wash);border-color:var(--no);color:var(--no)} code{font-family:var(--mono);font-size:.85em;background:var(--sunken); border:1px solid var(--rule-soft);border-radius:3px;padding:.05em .3em} footer{border-top:1px solid var(--rule);color:var(--muted);font-size:.8rem; padding:1.2rem 1.4rem;text-align:center} /* ------------------------------------------------------------ phone -- */ @media (max-width:48rem){ main{padding:1.2rem .85rem 3rem} .bar{padding:.6rem .85rem;gap:.7rem;row-gap:.55rem} .bar nav{order:3;flex-basis:100%;gap:.9rem;font-size:.93rem; overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem} .bar nav a{white-space:nowrap} .who{margin-left:auto;font-size:.8rem;gap:.6rem} h1{font-size:1.28rem} .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .tile dd{font-size:1.25rem} /* a key/value table has nowhere to scroll to, so give the label column less and let the value use the rest */ table.kv th{width:7.5rem} form.filter{padding:.8rem .85rem;gap:.7rem} form.filter label{flex:1 1 100%} form.filter input{width:100%;min-width:0} form.filter button,form.filter .btn{flex:1 1 auto} form.stack{max-width:none} .signin{margin:2rem auto;padding:1.4rem;max-width:none} table{font-size:.84rem} th,td{padding:.45rem .6rem} } @media (max-width:26rem){ .tiles{grid-template-columns:1fr} }