/* Yonderchild brand system — pulled from yonderchild.com
   bg #070909 · card #14191b · accent #2f4248 · accent text #7ba7b2 · paper #f3f0ea
   DM Serif Display (headings) · DM Sans (body) · DM Mono (times, labels) */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

:root{
  --bg:#070909;
  --bg2:#0e1213;
  --bg3:#14191b;
  --card:#14191b;
  --card2:#1c2326;
  --accent:#2f4248;
  --accent-hover:#24343a;
  --accent-text:#7ba7b2;
  --text:#f3f0ea;
  --text-muted:rgba(243,240,234,.7);
  --text-dim:rgba(243,240,234,.86);
  --text-faint:rgba(243,240,234,.22);
  --border:rgba(255,255,255,.12);
  --border-light:rgba(255,255,255,.07);
  --radius:10px;
  --pill:50px;
  --red:#c85c5c;
  --green:#7fb08a;

  --serif:"DM Serif Display",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono)}

/* eyebrow label — DM Mono, 9px, wide tracking (site's "trusted by") */
.field-label,.rundown th,.fixed-table th,.settings-sub{
  font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:1.44px;color:var(--text-faint);font-weight:400;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;border-bottom:1px solid var(--border-light);background:var(--bg2);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{height:44px;width:auto;display:block}
.brand-wordmark{
  font-family:var(--serif);font-size:17px;letter-spacing:2.2px;
  text-transform:uppercase;display:none;
}
.brand-rule{width:1px;height:30px;background:var(--border);flex:none}
.topbar h1{margin:0;font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.3px}
.brand-sub{
  margin:2px 0 0;font-family:var(--mono);font-size:9px;text-transform:uppercase;
  letter-spacing:1.44px;color:var(--text-faint);
}

/* ---------- org tabs ---------- */
.orgbar{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:14px 26px;border-bottom:1px solid var(--border-light);background:var(--bg);
}
.orgtab{
  background:transparent;color:var(--text-muted);border:1px solid var(--border);
  padding:11px 24px;border-radius:var(--pill);font-family:var(--sans);
  font-size:14px;font-weight:600;letter-spacing:.14px;cursor:pointer;transition:.15s;
}
.orgtab:hover{color:var(--text);border-color:rgba(255,255,255,.24)}
.orgtab.active{background:var(--accent);color:var(--text);border-color:var(--accent)}

/* ---------- layout ---------- */
.layout{padding:26px 26px 70px;max-width:1000px}
.panel{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);padding:26px 28px}

.show-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.show-head h2{margin:0;font-family:var(--serif);font-size:34px;font-weight:400;letter-spacing:-.7px;line-height:1.1}
.show-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.show-sub{margin:6px 0 0;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.44px;color:var(--text-faint)}
.show-sub .mono{color:var(--accent-text);font-size:11px;letter-spacing:.6px}

input,select,button{font-family:inherit}
input:focus,select:focus{outline:1px solid var(--accent-text);outline-offset:0}

.time-input{
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:11px 13px;font-family:var(--mono);font-size:15px;
  width:104px;text-align:right;transition:.15s;
}
.time-input:hover{border-color:rgba(255,255,255,.2)}
.time-input.big{font-size:16px}
.time-input.bad{border-color:var(--red);color:var(--red)}
.time-input::placeholder{color:rgba(243,240,234,.18)}

/* ---------- buttons ---------- */
.btn{
  border-radius:var(--pill);border:1px solid var(--border);background:transparent;color:var(--text);
  padding:12px 26px;font-size:14px;font-weight:600;letter-spacing:.14px;cursor:pointer;transition:.15s;
}
.btn:hover{border-color:rgba(255,255,255,.26);background:var(--card2)}
.btn.small{padding:9px 18px;font-size:13px}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.danger:hover{border-color:var(--red);color:var(--red);background:transparent}
.btn.add{
  border-style:dashed;border-color:var(--border-light);color:var(--text-muted);
  font-size:13px;padding:9px 18px;font-weight:500;
}
.btn.add:hover{color:var(--text);border-style:solid;border-color:var(--border);background:transparent}

.icon{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:9px;line-height:1;padding:3px 5px;border-radius:4px;transition:.15s}
.icon:hover:not(:disabled){color:var(--text);background:var(--card2)}
.icon:disabled{opacity:.25;cursor:default}
.icon.del{font-size:18px;padding:1px 7px}
.icon.del:hover{color:var(--red)}
.icon.close{font-size:24px;padding:0 8px;color:var(--text-muted)}
.icon.reset-time{font-size:15px;padding:4px 6px;color:var(--red)}
.icon.reset-time:hover:not(:disabled){color:var(--red)}
.reset-glyph{color:var(--red)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
.rundown,.fixed-table{width:100%;border-collapse:collapse}
.rundown{min-width:640px}
.rundown th,.fixed-table th{text-align:left;padding:0 10px 10px;border-bottom:1px solid var(--border-light)}
.rundown th.c-target,.rundown th.c-dur,.fixed-table th.c-dur{text-align:right}
.rundown td,.fixed-table td{padding:7px 10px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.rundown tr:last-child td,.fixed-table tr:last-child td{border-bottom:none}

.c-move{width:30px;white-space:nowrap}
.c-move .icon{display:block}
.c-type{width:145px}
.c-target{width:180px;text-align:right}
.c-dur{width:150px;text-align:right}
.time-cell{display:inline-flex;align-items:center;gap:4px}
.c-del{width:34px;text-align:right}

.label-input{
  background:transparent;border:1px solid transparent;color:var(--text);
  border-radius:6px;padding:9px 10px;width:100%;font-size:15px;font-weight:500;transition:.15s;
}
.label-input:hover{border-color:var(--border-light)}
.label-input:focus{background:var(--bg2);border-color:var(--border)}

.type-select{
  background:var(--bg2);border:1px solid var(--border-light);color:var(--text-muted);
  border-radius:6px;padding:8px;font-size:12.5px;width:100%;cursor:pointer;transition:.15s;
}
.type-select:hover{border-color:var(--border);color:var(--text)}

.na{color:rgba(243,240,234,.16)}

/* record target cell */
.target-cell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px}
.target-val{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--accent-text);letter-spacing:-.4px}
.target-val.na{font-size:15px;color:rgba(243,240,234,.16)}
.target-val.bad{color:var(--red)}
.target-diff{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1.1px}
.target-diff.over{color:var(--red)}
.target-diff.under{color:var(--accent-text);opacity:.75}
.target-diff.ok{color:var(--green)}

.empty{color:var(--text-muted);padding:24px 10px;text-align:center;font-size:14px}

/* type accents */
.t-coldopen .label-input{border-left:2px solid var(--accent-text);border-radius:0 6px 6px 0}
.t-segment  .label-input{border-left:2px solid var(--accent);border-radius:0 6px 6px 0}
.t-insert   .label-input{border-left:2px solid var(--red);border-radius:0 6px 6px 0}
.f-transition .label-input{border-left:2px solid var(--border);border-radius:0 6px 6px 0}
.f-spot       .label-input{border-left:2px solid var(--accent-text);border-radius:0 6px 6px 0}
.f-fixed      .label-input{border-left:2px solid var(--border);border-radius:0 6px 6px 0}

.add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.legend{margin:22px 0 0;font-size:13px;color:var(--text-muted);line-height:1.7;max-width:74ch}
.legend b{color:var(--text-dim);font-weight:600}
.legend code{font-family:var(--mono);font-size:12px;background:var(--bg2);padding:2px 6px;border-radius:4px;color:var(--accent-text)}

.alert{
  background:rgba(200,92,92,.09);border:1px solid rgba(200,92,92,.32);color:#e8a5a5;
  border-radius:8px;padding:12px 14px;font-size:13.5px;margin:0 0 18px;line-height:1.55;
}

/* ---------- settings dialog ---------- */
.settings{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);
  padding:0;width:min(700px,calc(100vw - 32px));max-height:calc(100vh - 60px);
}
.settings::backdrop{background:rgba(7,9,9,.82)}
.settings-inner{padding:26px 28px 22px;display:block}

.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.settings-head h2{margin:0;font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.4px}

.settings-grid{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field.grow{flex:1;min-width:200px}
.org-name{
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:11px 13px;font-family:var(--serif);font-size:18px;font-weight:400;width:100%;
}

.settings-note{margin:0 0 14px;font-size:12.5px;color:var(--text-muted);line-height:1.65;max-width:66ch}
.settings-note.tight{margin:-10px 0 26px}

.settings-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--border-light);
}
.settings-foot-left,.settings-foot-right{display:flex;gap:8px;align-items:center}

@media (max-width:700px){
  .topbar,.orgbar,.layout{padding-left:16px;padding-right:16px}
  .show-head h2{font-size:26px}
  .c-type{width:112px}
  .c-target{width:126px}
  .rundown{min-width:580px}
}