/* Replica of the SteadyScreen client admin page — software 1.14.5.
 *
 * This is a PORT of the real stylesheet, not a lookalike. Everything from
 * ".ssd body/wrap" down is the <style> block of ADMIN_PAGE in
 * "Display System/kiosk/kiosk.py" (~3650–3800), scoped under .ssd and with the
 * real class names kept so the two can be diffed by eye. When the admin page's
 * CSS changes, re-port it; do not re-approximate it.
 *
 * Only the browser chrome, the demo badge, the toast and .ssd__demo-note are
 * this site's own — everything a visitor would mistake for the product is the
 * product's. (.shot is ported too; what it displays is images/demo-screen.svg,
 * a mock of the imaginary shop's page.)
 */

/* ------------------------------------------------------- the browser chrome */
.ssd{
  --d-bg:#15171a; --d-card:#1e2126; --d-head:#262b33; --d-line:#2e333a;
  --d-fg:#e8eaed; --d-dim:#9aa3ad; --d-acc:#4c8dff; --d-ok:#3ecf8e; --d-warn:#ffb454;
  position:relative;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--d-bg); color:var(--d-fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.ssd__chrome{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:#0f1115; border-bottom:1px solid var(--d-line);
}
.ssd__dot{width:11px;height:11px;border-radius:50%;background:#2e333a;flex:0 0 11px}
.ssd__addr{
  margin-left:8px; font-family:var(--mono); font-size:.82rem; color:var(--d-dim);
  background:#15171a; border:1px solid var(--d-line); border-radius:6px;
  padding:4px 12px; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ssd__badge{
  flex:0 0 auto; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:#3a2f1d; background:var(--d-warn); border-radius:999px; padding:4px 10px; font-weight:700;
}

/* ------------------------------------------------ ported from ADMIN_PAGE */
/* body{...padding:1.2rem} + .wrap{max-width:780px;margin:0 auto} */
.ssd__body{padding:1.2rem; max-width:780px; margin:0 auto}

.ssd__tabs{
  display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1.1rem;
  border-bottom:1px solid var(--d-line); padding-bottom:.7rem;
}
.ssd__tabs button{
  flex:0 0 auto; min-width:0; min-height:2.6rem; padding:.5rem 1.1rem;
  background:transparent; border:1px solid transparent; border-radius:8px;
  color:var(--d-dim); font-size:.95rem; font-family:inherit; cursor:pointer;
}
.ssd__tabs button:hover{color:var(--d-fg); background:#22262d}
.ssd__tabs button.on{
  background:#22262d; border-color:var(--d-line); color:var(--d-fg); font-weight:600;
}

/* .cards{display:grid;gap:1rem;grid-template-columns:1fr} */
.ssd__pane{display:none}
.ssd__pane.on{display:grid; gap:1rem; grid-template-columns:1fr}
.ssd__pane.on > *{min-width:0}

.ssd__strip{
  display:grid; gap:.5rem; margin:.2rem 0 1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.ssd .stat{
  background:var(--d-card); border:1px solid var(--d-line); border-radius:9px;
  padding:.55rem .7rem; min-width:0;
}
.ssd .stat .k{
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--d-dim); margin-bottom:.15rem;
}
.ssd .stat .v{
  display:block; font-size:.95rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.ssd__h1{font-size:1.15rem; margin:0 0 .2rem; font-weight:600; letter-spacing:0; color:var(--d-fg)}
/* BRAND_CSS from kiosk.py, ported verbatim. The product defines the wordmark's
   colours in one place -- BRAND_CYAN in kiosk.py, itself taken from CYAN in
   build/make-splash.py -- and substitutes them into every page it serves. */
.ssd .bw{color:#fff}
.ssd .bs{color:#6fe3f2}
.ssd__sub{color:var(--d-dim); font-size:.85rem; margin-bottom:1.2rem}

.ssd__card{
  background:var(--d-card); border:1px solid var(--d-line); border-radius:10px;
  padding:1.1rem 1.15rem; margin:0;
}
.ssd__card > h2:first-child{
  margin:-1.1rem -1.15rem 1rem;
  padding:.75rem 1.15rem;
  background:var(--d-head);
  border-radius:9px 9px 0 0;
}
.ssd__card dl + .row, .ssd__card dl + .grid2{margin-top:.9rem}

/* The accent bar and the uppercase weight are what make a card read as a
   thing with a name rather than a pile of controls. */
.ssd h2{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--d-fg); margin:0 0 1rem; font-weight:700;
  padding-bottom:.6rem; border-bottom:1px solid var(--d-line);
  display:flex; align-items:center; gap:.6rem; line-height:1.5;
}
.ssd h2::before{
  content:""; width:3px; height:1.05em; border-radius:2px;
  background:var(--d-acc); flex:0 0 auto;
}
.ssd__card h3{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--d-dim); font-weight:600; margin:1.2rem 0 .6rem;
  padding:0; border:0; line-height:1.5;
}

.ssd label{
  display:block; font-size:.8rem; color:var(--d-dim); margin-bottom:.35rem;
  text-transform:uppercase; letter-spacing:.04em; font-weight:400;
}
.ssd input:not([type=checkbox]):not([type=radio]):not([type=range]),
.ssd select,
.ssd textarea{
  width:100%; box-sizing:border-box; padding:.7rem .8rem;
  background:#111316; border:1px solid var(--d-line); border-radius:7px;
  color:var(--d-fg); font:inherit;
}
.ssd input[readonly],.ssd select[disabled]{cursor:not-allowed}

.ssd .row{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}
/* equal-width buttons so a row of two and a row of four still line up */
.ssd__card button{
  flex:1 1 0; min-width:8.5rem; min-height:2.9rem; padding:.7rem 1rem;
  background:#2a2f36; color:var(--d-fg); border:1px solid var(--d-line);
  border-radius:7px; font:inherit; cursor:pointer;
}
.ssd__card button:hover{background:#333941}
.ssd__card button.primary{background:var(--d-acc); border-color:var(--d-acc); color:#fff}
.ssd__card button.primary:hover{background:#3d7be8}
.ssd__card button.danger{background:#3a2325; border-color:#5b3033; color:#ffb0b0}
.ssd__card button.danger:hover{background:#4a2b2e}
.ssd__card button:disabled{opacity:.45; cursor:not-allowed}
.ssd__card button.small{flex:0 0 auto; min-width:0; min-height:2.2rem; padding:.35rem .8rem; font-size:.85rem}
.ssd__card button.mini{min-height:2.1rem; padding:.3rem .8rem; font-size:.85rem; width:auto; min-width:0; flex:0 0 auto}

.ssd dl{
  display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; margin:0;
  font-size:.88rem;
}
.ssd dt{color:var(--d-dim)}
.ssd dd{margin:0; overflow-wrap:anywhere; font-family:ui-monospace,monospace}
.ssd .ok{color:var(--d-ok)}
.ssd .warn{color:var(--d-warn)}
.ssd .dim{color:var(--d-dim)}
.ssd .grid2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.ssd .msg{margin-top:.8rem; font-size:.85rem; min-height:1.2em; color:var(--d-ok)}
.ssd .note{color:var(--d-dim); font-size:.8rem; margin-top:.5rem; line-height:1.5}
.ssd .note--lead{color:var(--d-dim); font-size:.9rem; margin:0 0 .9rem; line-height:1.5}
.ssd .note b,.ssd .note strong{color:var(--d-fg)}
.ssd code{font-family:ui-monospace,monospace; font-size:.9em}

/* summary is styled as an h3 that happens to open */
.ssd__card details > summary{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--d-dim); font-weight:600; cursor:pointer;
  list-style:none; display:flex; align-items:center; gap:.5rem;
  padding:.45rem 0; user-select:none;
}
.ssd__card details > summary::-webkit-details-marker{display:none}
.ssd__card details > summary::before{
  content:""; width:.45rem; height:.45rem;
  border-right:2px solid var(--d-dim); border-bottom:2px solid var(--d-dim);
  transform:rotate(-45deg); transition:transform .15s; flex:0 0 auto;
  margin-left:.15rem;
}
.ssd__card details[open] > summary::before{transform:rotate(45deg)}
.ssd__card details > summary:hover{color:var(--d-fg)}

/* networks */
.ssd .net{margin-top:.8rem}
.ssd__card .net button.row-net{
  display:flex; align-items:center; gap:.7rem; width:100%;
  text-align:left; margin:0 0 .4rem; padding:.7rem .8rem; min-height:3rem;
}
.ssd .savedrow{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem;
  border:1px solid var(--d-line); border-radius:8px; margin-bottom:.4rem;
  background:#15181c;
}
.ssd .savedrow .ssid{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ssd .savedacts{display:flex; gap:.4rem; flex:0 0 auto}
.ssd .bars{display:inline-flex; align-items:flex-end; gap:2px; height:1em; flex:none}
.ssd .bars i{width:3px; background:#4c5560; border-radius:1px}
.ssd .bars i.on{background:var(--d-acc)}
.ssd .ssid{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ssd .tag{
  font-size:.7rem; padding:.1rem .4rem; border-radius:4px; background:#2f3742;
  color:var(--d-dim); flex:none;
}
.ssd .tag.cur{background:#1d4030; color:var(--d-ok)}
.ssd .join{
  padding:.7rem .8rem; background:#111316; border:1px solid var(--d-line);
  border-radius:7px; margin:0 0 .6rem;
}

/* the live screenshot */
.ssd .shotwrap{margin-top:1rem}
.ssd__card > h2 + .shotwrap{margin-top:0; margin-bottom:1rem}
.ssd .shothead{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-bottom:.5rem;
}
.ssd .shotstamp{font-size:.8rem; color:var(--d-dim); text-transform:uppercase; letter-spacing:.04em}

/* password fields with their Show buttons */
.ssd .pwrow{display:flex; gap:.5rem; align-items:stretch; margin:.15rem 0 0}
.ssd .pwrow input{flex:1 1 0; min-width:0}
.ssd__card .pwrow button{flex:0 0 auto; min-height:0; min-width:0; padding:.35rem .9rem; font-size:.85rem}
/* Ported: one field-and-button pair per line once the row is phone-narrow.
   The product's breakpoint is 560px, so this one is too. */
@media (max-width:560px){
  .ssd .pwrow{display:grid; grid-template-columns:1fr auto}
}

/* checkbox-and-label rows: the real page writes these inline on the element */
.ssd .check{
  display:flex; align-items:center; gap:.6rem; margin:.9rem 0 .2rem;
  font-size:.95rem; color:var(--d-fg); text-transform:none; letter-spacing:0;
}
.ssd .check input{width:auto; margin:0; flex:0 0 auto}
.ssd .indent{margin-left:1.7rem}

/* the two acknowledgement gates */
.ssd .gate{padding:.9rem 1rem; border:1px solid #7c5a2d; border-radius:10px; background:#1d1811}
.ssd .gate--red{border-color:#7c2d2d; background:#1e1416}
.ssd .gate-h{font-weight:600; color:#ffcf8b; margin-bottom:.5rem}
.ssd .gate--red .gate-h{color:#ff9b9b}
.ssd .gate-b{color:var(--d-dim); font-size:.92rem; line-height:1.5}
.ssd .gate-b b,.ssd .gate-b strong{color:var(--d-fg)}
.ssd__section{border-top:1px solid var(--d-line); margin-top:1.6rem; padding-top:.9rem}
.ssd__section h3{margin-top:0}

/* ------------------------------------------------------ this site's own bits */
.ssd .shot{
  display:block; width:100%; max-height:46vh; object-fit:contain;
  border:1px solid var(--d-line); border-radius:8px; background:#0b0d0f;
  min-height:80px;
}
.ssd__demo-note{
  margin:1rem 0; padding:.6rem .8rem; font-size:.84rem; line-height:1.5;
  color:var(--d-dim); border-left:2px solid var(--accent); background:#181b20;
  border-radius:0 7px 7px 0;
}
.ssd__demo-note strong{color:var(--d-fg)}
.ssd__toast{
  position:absolute; left:50%; bottom:22px; transform:translate(-50%,14px);
  background:#22262d; color:var(--d-fg); border:1px solid var(--d-line);
  border-radius:9px; padding:11px 18px; font-size:.9rem; max-width:90%;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 10px 28px rgba(0,0,0,.5); text-align:center;
}
.ssd__toast.on{opacity:1; transform:translate(-50%,0)}

@media(max-width:680px){
  .ssd .grid2{grid-template-columns:1fr}
  .ssd dl{grid-template-columns:1fr; gap:.1rem}
  .ssd dd{margin-bottom:.5rem}
  .ssd .indent{margin-left:0}
  .ssd__badge{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ssd__toast{transition:none}
}