/* ============================================================
   CORE Teams Teleprompter - One CoreDev IT (CORE)
   Brand: 60-30-10. Mexican Red #A31F35 used for accent only.
   Chrome follows the Teams theme; the prompt stage has its own.
   ============================================================ */

:root{
  /* Brand palette */
  --red:      #A31F35;
  --red-dk:   #82182A;
  --red-lt:   #BE6271;

  /* Light chrome (60 / 30 / 10) */
  --bg:       #FCFDFE;   /* 60% dominant */
  --surface:  #FFFFFF;   /* 30% structure */
  --surface-2:#F4F7FA;
  --line:     #D8D8D8;
  --line-2:   #C3C5C8;
  --t1:       #191919;
  --t2:       #4C4C4C;
  --t3:       #767676;   /* AA-safe muted on light */
  --accent:   var(--red);
  --accent-t: var(--red);
  --shadow:   0 1px 2px rgba(25,25,25,.06), 0 4px 14px rgba(25,25,25,.06);

  --font-h: "Playfair Display", Georgia, serif;
  --font-b: "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

[data-theme="dark"], [data-theme="contrast"]{
  --bg:       #1B1B1B;   /* 60% dominant */
  --surface:  #262626;   /* 30% structure */
  --surface-2:#151515;
  --line:     #4C4C4C;
  --line-2:   #5F5F5F;
  --t1:       #FFFFFF;
  --t2:       #D1D1D1;
  --t3:       #B2B2B2;
  --accent-t: var(--red-lt);  /* red text needs lifting on Cod Gray */
  --shadow:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
}
[data-theme="contrast"]{
  --bg:#000000; --surface:#000000; --line:#FFFFFF; --line-2:#FFFFFF;
  --t1:#FFFFFF; --t2:#FFFFFF; --t3:#FFFFFF;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-b);
  font-size:14px;
  line-height:1.6;
  color:var(--t1);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button,input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------- App shell ---------- */
.app{ display:flex; flex-direction:column; height:100vh; position:relative; }
.view{ display:none; flex-direction:column; min-height:0; flex:1; }
.view.is-active{ display:flex; }

/* ---------- Top bar ---------- */
.bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  flex:0 0 auto;
}
.bar__title{
  font-family:var(--font-h);
  font-size:17px; font-weight:700; line-height:1.2;
  margin:0; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1 1 auto; min-width:0;
}
.bar__mark{
  flex:0 0 auto; width:4px; height:20px; border-radius:2px;
  background:var(--accent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 12px; min-height:34px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--t1);
  font-weight:500; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .06s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); border-color:var(--t3); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn--primary{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
}
.btn--primary:hover{ background:var(--red-dk); border-color:var(--red-dk); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--t2); }
.btn--ghost:hover{ background:var(--surface-2); color:var(--t1); }
.btn--icon{ padding:0; width:34px; min-width:34px; }
.btn--danger:hover{ border-color:var(--red); color:var(--accent-t); }
.btn .mi{ font-size:19px; line-height:1; }

.mi{
  font-family:"Material Icons Round","Material Icons";
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap;
  word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased; user-select:none;
}

/* ---------- Library ---------- */
.scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.pad{ padding:12px; }

.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.card{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); padding:10px 12px;
  position:relative;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); }
.card.is-active{ border-color:var(--accent); }
.card.is-active::before{
  content:""; position:absolute; left:-1px; top:10px; bottom:10px;
  width:3px; border-radius:0 2px 2px 0; background:var(--accent);
}
.card__title{
  font-weight:600; font-size:14px; margin:0 0 2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card__meta{ font-size:12px; color:var(--t3); display:flex; gap:10px; flex-wrap:wrap; }
.card__actions{ display:flex; gap:4px; margin-top:9px; flex-wrap:wrap; }

.empty{ text-align:center; padding:36px 16px; color:var(--t3); }
.empty .mi{ font-size:40px; color:var(--line-2); display:block; margin-bottom:10px; }
.empty h3{ font-family:var(--font-h); font-size:18px; color:var(--t1); margin:0 0 6px; }
.empty p{ margin:0 0 16px; font-size:13px; }

/* ---------- Editor ---------- */
.field{ display:block; margin-bottom:12px; }
.field__label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t3); margin-bottom:5px;
}
.input, .textarea{
  width:100%; padding:9px 11px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--t1);
}
.input:focus, .textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(163,31,53,.14); }
.textarea{ min-height:240px; resize:vertical; line-height:1.7; font-size:14px; }
.hint{ font-size:12px; color:var(--t3); margin:6px 0 0; }

.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spacer{ flex:1 1 auto; }

/* ---------- Prompt stage ---------- */
.stage{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  background:#000; color:#fff;
  cursor:pointer;
}
.stage[data-surface="light"]{ background:#F4F7FA; color:#000; }
.stage[data-surface="sepia"]{ background:#1B1512; color:#F5E8D8; }

.stage__scroll{ position:absolute; inset:0; overflow:hidden; }
.stage__text{
  padding:0 var(--tp-margin, 18px);
  font-size:var(--tp-size, 34px);
  line-height:var(--tp-lh, 1.45);
  font-weight:var(--tp-weight, 600);
  white-space:pre-wrap;
  word-break:break-word;
  will-change:transform;
}
.stage[data-mirror-h="1"] .stage__text{ transform:scaleX(-1); }
.stage[data-mirror-v="1"] .stage__text{ transform:scaleY(-1); }
.stage[data-mirror-h="1"][data-mirror-v="1"] .stage__text{ transform:scale(-1,-1); }

/* Reading guide */
.guide{ position:absolute; inset:0; pointer-events:none; display:none; }
.stage[data-guide="1"] .guide{ display:block; }
.guide__line{
  position:absolute; left:0; right:0; top:var(--tp-guide, 38%);
  height:0; border-top:2px solid var(--red);
  box-shadow:0 0 14px rgba(163,31,53,.55);
}
.guide__caret{
  position:absolute; top:var(--tp-guide, 38%); left:0;
  width:0; height:0; transform:translateY(-50%);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:10px solid var(--red);
}
.guide__caret--r{ left:auto; right:0; border-left:0; border-right:10px solid var(--red); }

/* Dim outside the reading band */
.dim{ position:absolute; inset:0; pointer-events:none; display:none; }
.stage[data-dim="1"] .dim{ display:block; }
.dim::before, .dim::after{ content:""; position:absolute; left:0; right:0; }
.dim::before{ top:0; height:calc(var(--tp-guide, 38%) - 56px); background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.dim::after{ top:calc(var(--tp-guide, 38%) + 118px); bottom:0; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.85)); }
.stage[data-surface="light"] .dim::before{ background:linear-gradient(to bottom, rgba(244,247,250,.92), rgba(244,247,250,0)); }
.stage[data-surface="light"] .dim::after{ background:linear-gradient(to bottom, rgba(244,247,250,0), rgba(244,247,250,.92)); }

/* Countdown overlay */
.countdown{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); z-index:5;
}
.countdown.is-on{ display:flex; }
.countdown span{
  font-family:var(--font-h); font-size:92px; font-weight:700; color:#fff;
  text-shadow:0 0 30px rgba(163,31,53,.85);
}

/* ---------- Prompt HUD ---------- */
.hud{
  flex:0 0 auto; border-top:1px solid var(--line);
  background:var(--surface); padding:8px 10px;
}
.hud__stats{
  display:flex; gap:12px; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3); margin-bottom:8px; flex-wrap:wrap;
}
.hud__stat b{ color:var(--t1); font-variant-numeric:tabular-nums; font-weight:700; }
.hud__stat--live b{ color:var(--accent-t); }
.hud__controls{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.hud__play{ width:44px; min-width:44px; height:38px; }
.hud__play .mi{ font-size:24px; }

.progress{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.progress__fill{ height:100%; width:0; background:var(--accent); }

/* ---------- Settings drawer ---------- */
.drawer{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  background:var(--surface); border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.25);
  transform:translateY(101%); transition:transform .22s cubic-bezier(.2,.7,.3,1);
  max-height:80vh; overflow-y:auto; visibility:hidden;
}
.drawer.is-open{ transform:translateY(0); visibility:visible; }
.drawer__head{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:1;
}
.drawer__head h3{ font-family:var(--font-h); font-size:16px; margin:0; flex:1; }

.ctrl{ padding:10px 12px; border-bottom:1px solid var(--line); }
.ctrl:last-child{ border-bottom:0; }
.ctrl__top{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.ctrl__label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3);
  flex:1;
}
.ctrl__val{ font-size:12px; font-weight:700; color:var(--t1); font-variant-numeric:tabular-nums; }

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:var(--line); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-6px;
  border-radius:50%; background:var(--accent); border:2px solid var(--surface); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:2px; background:var(--line); }
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent);
  border:2px solid var(--surface); cursor:pointer;
}

.seg{ display:flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; }
.seg button{
  flex:1; padding:7px 6px; border:0; background:var(--surface); color:var(--t2);
  cursor:pointer; font-size:12px; font-weight:600; border-right:1px solid var(--line-2);
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:var(--surface-2); }
.seg button.is-on{ background:var(--accent); color:#fff; }

.toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 0; position:relative; }
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.toggle__track{
  flex:0 0 auto; width:38px; height:21px; border-radius:11px;
  background:var(--line-2); position:relative; transition:background .15s ease;
}
.toggle__track::after{
  content:""; position:absolute; top:2px; left:2px; width:17px; height:17px;
  border-radius:50%; background:#fff; transition:transform .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle input:checked + .toggle__track{ background:var(--accent); }
.toggle input:checked + .toggle__track::after{ transform:translateX(17px); }
.toggle input:focus-visible + .toggle__track{ outline:2px solid var(--accent); outline-offset:2px; }
.toggle__label{ font-size:13px; font-weight:500; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:16px; transform:translate(-50%, 20px);
  background:var(--t1); color:var(--bg);
  padding:9px 15px; border-radius:var(--r-sm); font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:80; max-width:90vw; text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }

/* ---------- Confirm modal ---------- */
.modal{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(0,0,0,.55);
}
.modal.is-open{ display:flex; }
.modal__box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; max-width:340px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.modal__box h3{ font-family:var(--font-h); font-size:19px; margin:0 0 8px; }
.modal__box p{ margin:0 0 16px; color:var(--t2); font-size:13.5px; }

/* ---------- Wide layout (personal tab / pop-out) ---------- */
@media (min-width:760px){
  body{ font-size:15px; }
  .pad{ padding:20px 24px; max-width:820px; margin:0 auto; width:100%; }
  .bar{ padding:12px 20px; }
  .bar__title{ font-size:20px; }
  .stage__text{ padding:0 max(var(--tp-margin,18px), 6vw); }
  .hud{ padding:10px 20px; }
  .drawer{ left:auto; right:0; width:380px; border-radius:var(--r-lg) 0 0 0; }
}

@media (prefers-reduced-motion:reduce){
  .drawer, .toast, .btn{ transition:none; }
}