/* ============================================================
   DataBates theme for the status tracker.
   Tokens come from the DataBates Brand Kit: warm paper, one royal
   purple, Times for the voice, the device sans for the interface.
   To reskin for a client, copy this file and change the tokens
   in :root. Nothing else in the app holds a color.
   ============================================================ */
@font-face{font-family:Tinos;src:url("fonts/Tinos-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Tinos;src:url("fonts/Tinos-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* brand tokens */
  --paper:#faf8f3; --paper-raised:#ffffff; --paper-sunk:#f0ece3;
  --rule:#ddd6c8; --rule-strong:#8a8172;
  --ink:#1b1622; --ink-muted:#5c5566;
  --royal:#4a2482; --royal-deep:#24103f; --royal-press:#3a1a69; --royal-tint:#ede8f5;
  --on-royal:#ffffff; --on-royal-muted:#cbbfe0; --gilt:#b8975a;
  --danger:#9b1c1c; --danger-tint:#fbecea;

  /* the names the app uses, mapped to the tokens */
  --bg:var(--paper); --surface:var(--paper-raised); --surface-2:var(--paper-sunk);
  --fg:var(--ink); --muted:var(--ink-muted); --line:var(--rule); --line-strong:var(--rule-strong);
  --accent:var(--royal); --accent-fg:var(--on-royal); --accent-soft:var(--royal-tint);
  --brand:var(--royal); --brand-fg:var(--on-royal); --brand-soft:var(--royal-tint);
  --navy:var(--royal-deep); --navy-2:var(--royal-press); --on-navy:var(--on-royal); --on-navy-muted:var(--on-royal-muted);
  --ok:#2a6a45; --ok-soft:#e3f0e7; --warn:#80530a; --warn-soft:#f7ecd2;
  --crit:var(--danger); --crit-soft:var(--danger-tint);
  --info:var(--royal); --info-soft:var(--royal-tint); --neutral:#5c5566; --neutral-soft:#ece8df;
  --c-UN:#6b6475;
  --shadow:0 24px 60px rgba(27,22,34,.14);
  --serif:"Times New Roman",Times,Tinos,serif;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:var(--serif);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:4px;
  color-scheme:light;
}

/* type: serif carries the voice, sans carries the interface */
h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:36px;letter-spacing:-.01em}
h2{font-family:var(--serif);font-weight:400;font-size:21px;line-height:26px}
h3{font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--royal)}
a{color:var(--royal);text-decoration:underline}
.view-head p{max-width:640px}

/* top bar: one royal-deep band, closed by a gilt hairline */
.topbar{background:var(--royal-deep);border-bottom:1px solid var(--gilt)}
.brand-logo{height:22px}
.brand-text{border-left-color:rgba(255,255,255,.22)}
.brand-text b{font-family:var(--font);font-weight:500;font-size:13.5px}
.brand-text span{letter-spacing:.14em;font-weight:600}
nav.tabs button{font-family:var(--font);font-weight:500;border-bottom-width:2px;margin-bottom:-1px}
nav.tabs button[aria-selected="true"]{border-bottom-color:var(--gilt)}
.sync.live{background:#8fd0a8} .sync.off{background:#f0a39a} .sync.pending{background:#e6c36a}
.topbar .btn:focus-visible, nav.tabs button:focus-visible{outline-color:var(--on-royal)}

/* demo caption */
.demo-note{background:var(--paper-sunk);border-bottom:1px solid var(--rule);color:var(--ink-muted);font-size:13px;line-height:18px;text-align:center;padding:6px 16px}

/* controls: nearly square, color-only hover */
.btn{border-radius:2px;border-color:var(--rule-strong);transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--royal);background:var(--royal-tint)}
.btn.primary{background:var(--royal);border-color:var(--royal);color:var(--on-royal)}
.btn.primary:hover{filter:none;background:var(--royal-press);border-color:var(--royal-press)}
.btn.ghost:hover{background:transparent}
.btn.danger:hover{background:var(--danger-tint);border-color:var(--danger)}
.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--royal);outline-offset:2px}
select,input[type=text],input[type=number],input[type=date],input[type=search],textarea{border-radius:2px}
table.data select.inline,table.data input.inline{border-radius:2px}
.field>span,.toolbar label,.facts div span,.section-title{letter-spacing:.08em}

/* chips: a word in a quiet box, never a pill */
.badge{border-radius:2px;font-weight:500}
.badge.info,.badge.accent{background:var(--royal-tint);color:var(--royal)}
.owner{border-radius:2px}
.wk{border-radius:2px}

/* cards and figures */
.card{border-radius:var(--r)}
.tile{background:transparent;border:0;border-top:1px solid var(--ink);border-left:0;border-radius:0;padding:12px 0 6px}
.tile:hover{border-color:var(--royal)}
.tile:hover .k{color:var(--royal)}
.tile .k{letter-spacing:.14em;font-weight:600;font-size:11px}
.tile .v{font-family:var(--serif);font-weight:400;font-size:44px;line-height:48px;letter-spacing:-.01em;color:var(--royal)}
.tile.crit{border-top-color:var(--ink)} .tile.warn{border-top-color:var(--ink)} .tile.ok{border-top-color:var(--ink)} .tile.info{border-top-color:var(--ink)}
.tiles{gap:10px 28px;margin-bottom:22px}
.bar-row .track{border-radius:1px;height:8px} .bar-row .fill{border-radius:1px;background:var(--royal)}
.util{border-radius:1px} .util i{background:var(--royal)}
.facts div b{font-weight:500}
table.summary tr.total td{border-top:1px solid var(--ink)}

/* tables */
.tablewrap{border-radius:var(--r)}
table.data th{background:var(--paper-sunk);letter-spacing:.08em;font-weight:600}
table.data tr:hover td{background:#f7f4ec}
table.data .link{color:var(--royal);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:2px}
table.data .link:hover{text-decoration-color:var(--royal)}

/* calendar */
.cal{border-radius:var(--r)} .cal .day{border-radius:2px} .cal .chip{border-radius:2px}
.cal .day.today{border-color:var(--royal);box-shadow:inset 0 0 0 1px var(--royal)}
.cal-legend i{border-radius:1px}

/* drawer, modal, toasts: only the drawer and modal float */
.drawer-bg{background:rgba(36,16,63,.32)} .modal-bg{background:rgba(36,16,63,.42)}
.modal{border-radius:var(--r)}
.toast{border-radius:2px;box-shadow:none;background:var(--royal-deep);color:var(--on-royal)}
.toast.crit{background:var(--danger)}
.toast button{border-radius:2px}
pre.code{border-radius:2px} .mode label{border-radius:2px} .mode label.on{border-color:var(--royal);background:var(--royal-tint)}
.inbox-item{border-radius:2px} .search-menu ul{border-radius:2px;box-shadow:none}
.lockout .logo-card{background:transparent;padding:0;border-radius:0;margin-bottom:22px}
.lockout .brand-logo{height:34px}

/* ---- login: a paper card on one royal-deep ground ---- */
#auth{background:var(--royal-deep)}
#auth::before{content:none}
.auth-wrap{position:relative;width:min(420px,100%);display:flex;flex-direction:column;gap:28px;margin:auto}
.auth-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:none;margin:0;padding:0;border:0;border-radius:0}
.auth-brand img{height:34px;width:auto}
.auth-brand::after{content:"";display:block;width:48px;height:1px;background:var(--gilt)}
.auth-brand div{display:flex;flex-direction:column;gap:4px;border:0;padding:0;order:3}
.auth-brand b{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gilt)}
.auth-brand span{font-family:var(--font);font-size:15px;letter-spacing:0;text-transform:none;color:var(--on-royal-muted)}
.auth-card{width:100%;border-radius:var(--r);box-shadow:none;padding:32px;gap:16px;background:var(--paper-raised)}
#auth form{gap:20px}
#auth h1{font-family:var(--serif);font-weight:400;font-size:32px;line-height:38px;letter-spacing:-.01em}
#auth label{font-size:15px;line-height:20px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink);gap:8px}
#auth label input{height:48px;font-size:17px;padding:0 12px;border:1px solid var(--rule-strong);border-radius:2px;background:var(--paper-raised);font-weight:400}
.auth-btn{height:48px;padding:0 24px;border-radius:2px;background:var(--royal);color:var(--on-royal);font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:.01em;transition:background-color .15s}
.auth-btn:hover{filter:none;background:var(--royal-press)}
.auth-links button{color:var(--royal);text-decoration:underline;font-size:15px}
.auth-help{font-size:15px;line-height:24px}
.auth-note{font-size:13px;line-height:18px}
.auth-note.err{color:var(--danger)}
.auth-foot{border:0;padding:0;font-size:13px;line-height:18px;color:var(--on-royal-muted);text-align:left}
#auth .auth-links button:focus-visible,#auth input:focus-visible,#auth .auth-btn:focus-visible{outline:2px solid var(--royal);outline-offset:2px}

.auth-note:empty{display:none}

/* phones: tabs take their own row under the wordmark */
@media (max-width:760px){
  nav.tabs{order:3;flex:1 0 100%;margin-top:-4px}
  .brand-logo{height:20px}
  h1{font-size:26px;line-height:32px}
  .tile .v{font-size:36px;line-height:40px}
}