/* video.aobblog.com — shared styles.
   Tokens carried over from the single-file Shooting Plan Builder. */

:root{
  --sp-bg:#faf9f5;
  --sp-panel:#ffffff;
  --sp-ink:#1f2a1d;
  --sp-muted:#6b7167;
  --sp-accent:#3a6b35;
  --sp-accent-soft:#eef2ec;
  --sp-border:#dcdcd2;
  --sp-border-strong:#c3c4b8;
  --sp-warn:#9a3b2f;
  --sp-warn-soft:#fbeeec;
  --sp-radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--sp-bg);
  color:var(--sp-ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:28px 20px 90px;
}
.sp-wrap{max-width:820px;margin:0 auto}
.sp-wrap-narrow{max-width:680px;margin:0 auto}

a{color:var(--sp-accent)}

/* ---- masthead ---- */
.sp-masthead{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.sp-masthead h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:30px;
  line-height:1.1;margin:0 0 4px;letter-spacing:-0.01em;
}
.sp-masthead h1 a{color:inherit;text-decoration:none}
.sp-masthead p{margin:0;color:var(--sp-muted);font-size:14px}
.sp-masthead-spacer{flex:1}

/* ---- generic controls ---- */
input[type=text],input[type=email],textarea,select{
  font-family:inherit;font-size:15px;color:var(--sp-ink);
  background:var(--sp-panel);
  border:1px solid var(--sp-border);
  border-radius:9px;padding:9px 11px;width:100%;
}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--sp-accent);outline-offset:2px;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--sp-accent);
  box-shadow:0 0 0 3px var(--sp-accent-soft);
}

.sp-btn{
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border-radius:10px;padding:11px 18px;border:1px solid var(--sp-accent);
  text-decoration:none;display:inline-block;
}
.sp-btn-primary{background:var(--sp-accent);color:#fff}
.sp-btn-primary:hover{background:#2f5a2b}
.sp-btn-ghost{background:transparent;color:var(--sp-accent)}
.sp-btn-ghost:hover{background:var(--sp-accent-soft)}
.sp-btn-danger{border-color:var(--sp-warn);color:var(--sp-warn);background:transparent}
.sp-btn-danger:hover{background:var(--sp-warn-soft)}
.sp-btn:disabled{opacity:0.4;cursor:default}

.sp-label{
  font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--sp-muted);
}
.sp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.sp-field:last-child{margin-bottom:0}
.sp-note{font-size:12px;color:var(--sp-muted);margin-top:16px;line-height:1.55}

/* ---- index ---- */
.sp-stories{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.sp-story{
  background:var(--sp-panel);border:1px solid var(--sp-border);
  border-left:4px solid var(--sp-border-strong);
  border-radius:var(--sp-radius);padding:16px 18px;
}
.sp-story h2{
  font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:600;
  margin:0 0 3px;line-height:1.2;
}
.sp-story h2 a{color:inherit;text-decoration:none}
.sp-story h2 a:hover{color:var(--sp-accent)}
.sp-story-meta{
  font-size:12.5px;color:var(--sp-muted);
  font-variant-numeric:tabular-nums;margin:0 0 12px;
}
.sp-story-desc{font-size:14px;color:var(--sp-muted);margin:0 0 12px;font-style:italic}
.sp-actions{display:flex;flex-wrap:wrap;gap:8px}
.sp-actions .sp-btn{font-size:13.5px;padding:7px 13px;border-radius:8px}

.sp-empty{
  border:1.5px dashed var(--sp-border-strong);border-radius:var(--sp-radius);
  padding:36px 24px;text-align:center;color:var(--sp-muted);
}
.sp-empty p{margin:0 0 16px;font-size:15px}

/* ---- login ---- */
.sp-login{max-width:400px;margin:14vh auto 0}
.sp-login h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:26px;margin:0 0 6px;
}
.sp-login p{color:var(--sp-muted);font-size:14px;margin:0 0 20px}
.sp-said{
  background:var(--sp-accent-soft);border:1px solid var(--sp-border);
  border-radius:var(--sp-radius);padding:16px 18px;font-size:14.5px;
}
.sp-said-bad{background:var(--sp-warn-soft);border-color:#e6c9c3;color:var(--sp-warn)}

/* ---- shared card bits used by editor and aide ---- */
.sp-card{
  background:var(--sp-panel);border:1px solid var(--sp-border);
  border-left:4px solid var(--sp-border-strong);
  border-radius:var(--sp-radius);padding:16px;
}
.sp-card[data-nottiktok="true"]{border-left-color:var(--sp-accent)}
.sp-scenes{display:flex;flex-direction:column;gap:16px}