/* Ask PATCH admin page — all styles.
   Split out of index.html on 2026-09-18. No build step: this file is served as
   written and the page links it directly. */

:root{
  --navy:#1f3864;
  --gold:#c8a000;
  --page:#f2f4f8;
  --line:#d6dceb;
  --muted:#6b7488;
  --ink:#1b2027;
  --ok:#1d6b2f;
  --bad:#9a2424;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--page);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

header{background:var(--navy);color:#fff;padding:16px 22px}
header h1{margin:0;font-size:17px;font-weight:650}
header p{margin:2px 0 0;font-size:12px;opacity:.8}

.wrap{max-width:900px;margin:0 auto;padding:22px 18px 60px}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:0 0 20px}
.card h2{margin:0 0 14px;font-size:15px;font-weight:650;color:var(--navy)}
.card h3{margin:0 0 12px}

label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 4px}
input,select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font:inherit;outline:none;margin-bottom:12px;
}
input:focus,select:focus{border-color:var(--navy)}

button{
  border:none;border-radius:9px;background:var(--navy);color:#fff;padding:11px 18px;
  font:600 14px/1 inherit;cursor:pointer;
}
button.gold{background:var(--gold)}
button.quiet{background:#eef1f6;color:var(--navy)}
button.grey{background:var(--muted)}
button.link{background:none;color:#b00;padding:4px 6px;font-size:12.5px;text-decoration:underline}
button.link.plain{color:var(--navy)}
button.danger{background:var(--bad);padding:4px 10px;font-size:12px;border-radius:7px}
button:disabled{opacity:.5;cursor:default}
button.compact{width:auto;padding:8px 16px}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row>div{flex:1;min-width:180px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.5px;padding:0 8px 8px;border-bottom:1px solid var(--line);
}
td{padding:9px 8px;border-bottom:1px solid #eef1f6;vertical-align:top}
td.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--navy)}

/* Sortable headers. The arrow is drawn from the header's own state so there is
   never a second place to keep it in sync. */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--navy)}
th.sortable::after{content:"";opacity:.45;margin-left:5px}
th.sortable[data-dir="asc"]::after{content:"\25B2"}
th.sortable[data-dir="desc"]::after{content:"\25BC"}

.pill{display:inline-block;border-radius:11px;padding:2px 9px;font-size:11px;font-weight:700}
.live{background:#e3f3e6;color:var(--ok)}
.dead{background:#f6e4e4;color:var(--bad)}

.stats{display:flex;gap:22px;flex-wrap:wrap}
.stat b{display:block;font-size:23px;color:var(--navy);font-weight:700;line-height:1.2}
.stat span{font-size:11.5px;color:var(--muted)}

.bars{display:flex;align-items:flex-end;gap:3px;height:96px;margin:6px 0 4px}
.bars div{flex:1;background:var(--navy);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars div:hover{background:var(--gold)}
.axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:4px}

.two{display:flex;gap:22px;flex-wrap:wrap}
.two>div{flex:1;min-width:230px}
.two h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 8px}

.preset{background:#eef1f6;color:var(--navy);padding:6px 11px;font-size:12px;border-radius:7px}
.preset:hover{background:var(--navy);color:#fff}

.msg{font-size:13.5px;margin:10px 0 0;min-height:18px}
.msg.ok{color:var(--ok)}
.msg.bad{color:var(--bad)}
.hint{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.note{background:#fff8e1;border-left:3px solid var(--gold);padding:9px 12px;border-radius:0 6px 6px 0;margin-bottom:14px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* The codes table's own toolbar: search, status filter, and a count that says
   what is being hidden. 126 rows today and past 200 after the pilot. */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.toolbar input[type="search"]{flex:1;min-width:200px;margin:0}
.toolbar select{width:auto;margin:0}
.count{font-size:12.5px;color:var(--muted);margin:0 0 10px}

/* Revoke asks in the row rather than in a browser dialog. A modal blocks the
   page and is easy to dismiss by reflex; this cannot be confirmed by accident. */
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:12.5px}
.confirm span{color:var(--bad);font-weight:600}

.editor{margin-top:18px;padding:16px;border:1px solid #d7dbe6;border-radius:8px;background:#f7f8fb}
.editor .fields{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.editor .fields label{display:block;font-weight:600}
.editor .fields input,.editor .fields select{display:block;margin-bottom:0}
.editor .fields input{min-width:200px}
.trail div{font-size:12px;color:#4a5570}
.trail .head{color:var(--muted);margin-top:10px}

.spread{display:flex;gap:8px;flex-wrap:wrap}
.tight{margin:-6px 0 12px;display:flex;gap:5px;flex-wrap:wrap}
.stay{margin:10px 0 0}
.stay label{font-weight:400;display:inline}
.stay input{width:auto;margin-right:6px}

/* ---------------------------------------------------------------
   Phone. Below 720px the codes table stops being a table and each
   row becomes a card, with the column name carried on the cell as
   data-label. Nothing is hidden, so nothing has to be scrolled to.
   --------------------------------------------------------------- */
@media (max-width:720px){
  .wrap{padding:16px 12px 48px}
  .card{padding:16px}
  .stats{gap:16px}
  .stat b{font-size:20px}

  table.codes thead{position:absolute;left:-9999px}
  table.codes tr{
    display:block;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;margin:0 0 10px;
  }
  table.codes td{
    display:flex;justify-content:space-between;gap:12px;
    border:none;padding:4px 0;text-align:right;
  }
  table.codes td::before{
    content:attr(data-label);text-align:left;color:var(--muted);
    font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;flex:0 0 auto;
  }
  table.codes td.actions{justify-content:flex-end;padding-top:8px}
  table.codes td.actions::before{content:""}
  table.codes td.empty{justify-content:flex-start}
  table.codes td.empty::before{content:""}
}