/* Tela-PhoneX : styles
   Built for a screen reader first. Colour never carries meaning on
   its own, focus is always visible, and nothing depends on hover.
   (c) IP of VaShaun Jones */

:root{
  --grey-950:#1C1B1A; --grey-900:#262422; --grey-800:#3A3733; --grey-700:#57534E;
  --grey-600:#6B655F; --grey-400:#A39C94; --grey-300:#D6D1CB; --grey-200:#E7E3DE;
  --grey-100:#F5F3F1; --white:#FFFFFF;
  --orange-900:#7C2D12; --orange-800:#9A3412; --orange-700:#C2410C; --orange-600:#EA580C;
  --orange-100:#FFEDD5; --orange-50:#FFF7ED;
  --success:#065F46; --success-bg:#D1FAE5; --success-border:#6EE7B7;
  --danger:#991B1B;  --danger-bg:#FEE2E2;  --danger-border:#FCA5A5;
  --warning:#92400E; --warning-bg:#FEF3C7; --warning-border:#FCD34D;
  --focus:#111111;
  --surface:var(--grey-100); --card:var(--white); --ink:var(--grey-950);
  --muted:var(--grey-700); --line:var(--grey-300);
}

*{ box-sizing:border-box; }

body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  margin:0; background:var(--surface); color:var(--ink); line-height:1.55; font-size:16px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:0; top:-60px; background:var(--orange-800); color:#fff;
  padding:.75rem 1.25rem; z-index:1200; font-weight:700; text-decoration:none; border-radius:0 0 6px 0;
}
.skip-link:focus{ top:0; }

*:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- header ---------- */
header.app-header{
  background:var(--grey-950); color:#fff; padding:.9rem 1.25rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.75rem; border-bottom:3px solid var(--orange-700);
}
.brand{ display:flex; align-items:center; gap:.75rem; }
.brand-badge{
  width:42px; height:42px; border-radius:10px; flex:none;
  background:linear-gradient(160deg, var(--orange-600), var(--orange-800));
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  font-weight:800; color:#fff; font-size:1.1rem;
}
.brand-mark{
  font-size:1.3rem; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(180deg,#FFFFFF 0%, #CFCAC4 55%, #8E8880 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-mark .x{ -webkit-text-fill-color:var(--orange-600); color:var(--orange-600); }
.brand-tag{ font-size:.78rem; color:var(--grey-300); }
.who{
  font-size:.85rem; color:var(--grey-200); background:rgba(255,255,255,.08);
  padding:.4rem .75rem; border-radius:20px; border:1px solid rgba(255,255,255,.2);
}
.header-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

nav[role="tablist"]{
  background:var(--grey-900); padding:.35rem 1rem; display:flex; gap:.25rem;
  flex-wrap:wrap; border-bottom:1px solid var(--grey-800);
}
nav[role="tablist"] button{
  background:none; border:2px solid transparent; padding:.55rem .95rem;
  font-size:.95rem; font-weight:700; cursor:pointer; border-radius:4px; color:var(--grey-300);
}
nav[role="tablist"] button[aria-selected="true"]{
  border-bottom:3px solid var(--orange-600); color:#fff; background:rgba(255,255,255,.09);
}

main{ max-width:1120px; margin:0 auto; padding:1.5rem 1.25rem 4rem; }

h1{ font-size:1.7rem; margin:.2rem 0 1rem; }
h2{ font-size:1.2rem; margin:0 0 .6rem; }
h3{ font-size:1rem; margin:1.2rem 0 .5rem; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1.25rem; margin-bottom:1.25rem; box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.muted{ color:var(--muted); font-size:.92rem; }
.hint{ color:var(--muted); font-size:.88rem; margin:.35rem 0 0; }

.greet{ border-left:5px solid var(--orange-600); background:var(--orange-50); padding:.85rem 1rem; border-radius:8px; margin-bottom:1rem; }
.greet-line{ margin:0; font-weight:600; color:var(--orange-900); }

.summary{
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--grey-700);
  padding:.85rem 1rem; border-radius:8px; margin-bottom:1.25rem;
}

.banner{ border-radius:8px; padding:1rem 1.1rem; margin-bottom:1.25rem; border:2px solid; }
.banner h2, .banner h3{ margin-top:0; }
.banner-warn{ background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.banner-stop{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
.banner-warn *, .banner-stop *{ color:inherit; }

.pill{
  display:inline-block; font-size:.8rem; font-weight:700; padding:.15rem .55rem;
  border-radius:20px; border:1px solid; white-space:nowrap;
}
.pill-ok{ background:var(--success-bg); border-color:var(--success); color:var(--success); }
.pill-warn{ background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.pill-stop{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }

.count{
  display:inline-block; background:var(--grey-800); color:#fff; font-size:.85rem;
  padding:.1rem .5rem; border-radius:20px; margin-left:.35rem; vertical-align:middle;
}

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.9rem; margin:0; }
.stat-grid div{ background:var(--grey-100); border:1px solid var(--line); border-radius:8px; padding:.7rem .85rem; }
.stat-grid dt{ font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.stat-grid dd{ margin:.2rem 0 0; font-size:1.1rem; font-weight:700; }

table.data{ width:100%; border-collapse:collapse; margin:.5rem 0 1rem; font-size:.94rem; }
table.data th, table.data td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.data thead th{ background:var(--grey-200); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
table.data tbody tr:nth-child(even){ background:var(--grey-100); }

.btn{
  display:inline-block; background:var(--grey-200); color:var(--grey-950);
  border:1px solid var(--grey-400); padding:.6rem 1rem; border-radius:6px;
  font-weight:700; font-size:.95rem; cursor:pointer; font-family:inherit;
}
.btn:hover{ background:var(--grey-300); }
.btn-primary{ background:var(--orange-700); border-color:var(--orange-800); color:#fff; }
.btn-primary:hover{ background:var(--orange-800); }
.btn-quiet{ background:var(--white); }
.btn-small{ padding:.35rem .7rem; font-size:.85rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }

.field{ margin:.85rem 0; }
.field label{ display:block; font-weight:700; margin-bottom:.3rem; font-size:.95rem; }
.field input, .field select, .field textarea{
  width:100%; padding:.6rem .7rem; border:1px solid var(--grey-600); border-radius:6px;
  font-size:1rem; font-family:inherit; background:var(--white); color:var(--ink);
}
.field textarea{ resize:vertical; }
.field.checkbox, .field.radio{ display:flex; align-items:flex-start; gap:.55rem; }
.field.checkbox input, .field.radio input{ width:auto; margin-top:.3rem; flex:none; transform:scale(1.3); }
.field.checkbox label, .field.radio label{ margin:0; font-weight:500; }

fieldset.quiz{ border:1px solid var(--line); border-radius:8px; padding:.9rem 1rem; margin:1rem 0; }
fieldset.quiz legend{ font-weight:700; padding:0 .4rem; }

.script{
  background:var(--grey-100); border-left:4px solid var(--orange-600); margin:.6rem 0;
  padding:.8rem 1rem; font-size:.96rem; border-radius:0 6px 6px 0;
}
.letter{
  background:var(--grey-100); border:1px solid var(--line); padding:1rem;
  white-space:pre-wrap; font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.9rem; border-radius:6px; max-height:22rem; overflow:auto;
}
.echo{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:1.05rem; color:var(--orange-900); min-height:1.4rem; }

ul.plain{ margin:.4rem 0; padding-left:1.2rem; }
ul.timeline{ list-style:none; margin:.6rem 0 0; padding:0; }
ul.timeline li{ border-left:3px solid var(--grey-300); padding:.5rem 0 .5rem .8rem; margin-bottom:.4rem; }
ul.shortcut-list{ margin:.3rem 0 1rem; padding-left:1.2rem; }
ul.shortcut-list strong{ font-family:ui-monospace, Menlo, Consolas, monospace; }

/* ---------- call bar ---------- */
#call-bar{
  position:sticky; top:0; z-index:400; background:var(--orange-50);
  border:2px solid var(--orange-700); border-radius:10px; padding:1rem 1.1rem; margin-bottom:1.25rem;
}
#call-bar h2{ color:var(--orange-900); }
.surfaced{ margin-top:.75rem; }
.surfaced:not(:empty){
  background:var(--white); border:1px solid var(--orange-700); border-radius:8px; padding:.75rem .9rem;
}

/* ---------- modal ---------- */
#modal-wrap{
  position:fixed; inset:0; background:rgba(20,18,17,.62); z-index:900;
  display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow:auto;
}
#modal-wrap[hidden]{ display:none; }
.modal{
  background:var(--white); border-radius:12px; width:100%; max-width:680px;
  padding:1.5rem; border-top:5px solid var(--orange-700);
}
.modal h2{ margin-top:0; font-size:1.3rem; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--grey-950); color:#fff; padding:.85rem 1.2rem; border-radius:8px;
  z-index:1000; max-width:90vw; font-weight:600; border-left:5px solid var(--orange-600);
}
.toast[hidden]{ display:none; }

/* ---------- sign in ---------- */
.login-wrap{ max-width:520px; margin:3rem auto; padding:0 1.25rem; }
.login-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:1.75rem; border-top:5px solid var(--orange-700); }
.login-card h1{ margin-top:0; }
#login-error{ color:var(--danger); font-weight:700; min-height:1.4rem; }
.demo-note{ background:var(--orange-50); border:1px solid var(--orange-100); border-radius:8px; padding:.9rem 1rem; margin-top:1.25rem; font-size:.92rem; }
.demo-note code{ font-size:1.05rem; font-weight:700; }

/* ---------- footer ---------- */
footer.app-footer{
  background:var(--grey-900); color:var(--grey-200); font-size:.82rem;
  padding:1.1rem 1.25rem; text-align:center; line-height:1.7;
}
footer.app-footer a{ color:var(--orange-100); }

@media (max-width:640px){
  table.data{ font-size:.88rem; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  h1{ font-size:1.4rem; }
}