/* ideas: styles for public/js/ideas.js (portal.js styles live in approvals.css). The tabs, panels, rows,
   chips and forms are app.css's; these are only what the Idea Planner adds. The call sheet and the format
   bible are paper on screen and black on white A4 on the printer. */
.ideas { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.ideas-area { flex: 1; min-height: 0; overflow: auto; }

/* AI ideas */
.ai-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ai-form .grow { flex: 1; min-width: 240px; }
.ai-form textarea { width: 100%; min-height: 32px; }
.sugg { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.sugg.off { opacity: .55; }
.sugg input[type=checkbox] { margin-top: 8px; }
.sg-title { font: 600 15px/1.3 var(--font-head); width: 100%; margin: -2px 0 0 -6px; }
.sg-hook { margin: 0; padding-left: 10px; border-left: 2px solid var(--border-strong); }
.sg-why { color: var(--text-2); font-size: 12.5px; }
.sg-pps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sg-pps > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; }
.sg-ep2 { font-size: 12.5px; }

/* AI ideas, formats first: the strip of formats in production, then the chosen format's episode queue */
.fmt-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.fmt-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 10px 4px 5px; background: var(--panel); border: 1px solid var(--border); }
.fmt-tab.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fmt-tab .chip { padding: 3px; }
.fmt-tab-name { font-weight: 500; }
.ep { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.ep-title { font: 600 15px/1.3 var(--font-head); min-width: 0; overflow-wrap: anywhere; }
.ep > .row > .chip { flex: none; }
.ep-beats { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ep-beats > div { display: contents; }
.ep-beats .label { padding-top: 2px; }

/* a stage's framework kept in view: the five steps at the top of the funnel */
.steps-note { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius); background: var(--sunken); font-size: 12.5px; }
.steps-note ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.steps-note li { overflow-wrap: anywhere; }

/* the 80/20 meter, on AI ideas and Formats: proven in ink, tests in grey, the 80% mark across the bar */
.slate > .hd { flex-wrap: wrap; }
.slate-bar { position: relative; display: flex; height: 8px; margin: 4px 0; border-radius: 4px; background: var(--sunken); }
.slate-bar > span { height: 100%; }
.slate-bar > span:first-of-type { border-radius: 4px 0 0 4px; }
.slate-bar > span:last-of-type { border-radius: 0 4px 4px 0; }
.slate-bar > span:only-of-type { border-radius: 4px; }
.slate-bar > i { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-2); }
.slate-bar .p, .slate-key.p { background: var(--ink); }
.slate-bar .t, .slate-key.t { background: var(--border-strong); }
.slate-key { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.slate-key.t { margin-left: 6px; }
/* the funnel mix: each stage in its own tag colour, a mark where each stage's share of the mix ends */
.funnel { padding-top: 10px; border-top: 1px solid var(--border); }
.funnel-bar > span:first-of-type { border-radius: 4px 0 0 4px; }
.funnel-bar > span:last-of-type { border-radius: 0 4px 4px 0; }
.funnel-bar > span:only-of-type { border-radius: 4px; }
.funnel .slate-key + b { margin-left: -2px; }
.slate-list > summary { width: max-content; cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.slate-list > summary:hover { color: var(--text); }
.slate-list > div { margin: 10px -14px -14px; border-top: 1px solid var(--border); }

/* formats */
.fmt { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fmt-icon { background: var(--sunken); border-color: transparent; }
.fmt-name { font: 600 14px/1.3 var(--font-head); min-width: 0; overflow-wrap: anywhere; }
.fmt-spec { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer; border-radius: var(--radius); padding: 2px 4px; margin: 0 -4px; }
.fmt-spec:hover { background: var(--hover); }
.fmt-flags { gap: 4px; }
.fmt-kpi, .fmt-tries { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
.fmt-review { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--radius); background: var(--sunken); }

.fmt-queue { display: inline-flex; align-items: center; gap: 6px; width: max-content; font-size: 12.5px; font-weight: 500; color: var(--text); text-decoration: none; }
.fmt-queue:hover { text-decoration: underline; }
.fmt-acts { gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); }

/* the format builder, in its modal: one section per part of the spec, hairlines between */
.bld { display: flex; flex-direction: column; gap: 16px; }
.bld-sec { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bld-sec + .bld-sec { border-top: 1px solid var(--border); padding-top: 16px; }
.bld-sec > .field-row, .bld-sec > .grid, .bld-sec > .bld-name, .bld-sec > .col, .bld-sec > .beat-list, .bld-sec > textarea { align-self: stretch; }
.bld-hd { display: flex; flex-direction: column; gap: 3px; }
.bld-hd p, .bld .faint.small { font-size: 12.5px; color: var(--text-2); }
.bld-name { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bld-name > .field-row { flex: 1; min-width: 220px; }
.bld textarea, .bld input:not([type=number]) { width: 100%; }
.bld .field-row > button { justify-content: flex-start; }
.bld .seg { flex-wrap: wrap; max-width: 100%; }   /* the three stages wrap on a phone rather than widen the modal */
.beat-list { display: flex; flex-direction: column; gap: 6px; }
.beat-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 2fr) repeat(3, auto); gap: 6px; align-items: center; }
.beat-n { font: 500 12px/1 var(--font-mono); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.beat-row .up svg { transform: rotate(180deg); }
.ol-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding: 2px; }
.ol-row { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 6px 8px; text-align: left; white-space: normal; line-height: 1.35;
  background: var(--panel); border: 1px solid var(--border); }
.ol-row.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ol-thumb { flex: none; width: 36px; height: 48px; border-radius: 3px; object-fit: cover; background: var(--sunken); }
.ol-cap { font-size: 12.5px; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* the format registry, in its modal */
.fmt-reg { display: flex; flex-direction: column; gap: 14px; }
.fmt-reg p { font-size: 12.5px; color: var(--text-2); }
.fmt-reg p.reg-warn { color: var(--alert); }
.fmt-reg p.reg-warn:empty { display: none; }
.reg-row { display: flex; align-items: flex-start; gap: 16px; }
.reg-row + .reg-row, .reg-block { border-top: 1px solid var(--border); padding-top: 14px; }
.reg-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reg-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.reg-block > .field-row, .reg-block > input, .reg-list { align-self: stretch; }
.reg-list { display: flex; flex-direction: column; gap: 4px; }
.reg-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 6px 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.reg-item > span:not(.spacer) { min-width: 0; overflow-wrap: anywhere; }
/* A real checkbox drawn as a switch, the same as Settings'. On is ink: the accent is kept for the primary button. */

/* speak an idea: the modal, and what was said on a version drafted from it */
.vc-mic { min-width: 96px; }
.vc-mic.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.vc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); animation: vcrec 1s ease-in-out infinite alternate; }
@keyframes vcrec { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .vc-dot { animation: none; } }
.vc-time { font: 500 12.5px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.vc-status { font-size: 12.5px; color: var(--text-2); min-height: 18px; }
.vc-text { width: 100%; min-height: 140px; font: 14px/1.6 var(--font-ui); }
.vc-text[readonly] { background: var(--paper-warm); }
.vc-said > summary { width: max-content; cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.vc-said > p { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border-strong); font-size: 13px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* scripts, in the drawer */
.script-text { width: 100%; min-height: 300px; font: 14px/1.6 var(--font-ui); }
.script-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cmp-side { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
.cmp-side .add { background: var(--ok-bg); }
.cmp-side .del { background: var(--alert-bg); }

/* call sheets and the Slack feed */
.cs-shoots { border-top: 1px solid var(--border); }
.crewrow { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 6px; align-items: center; }
.smsg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.smsg:last-child { border-bottom: 0; }
.smsg.done { opacity: .6; }
.smsg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.steps { margin: 0; padding-left: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }

/* the printable call sheet */
.cs-page { max-width: 880px; }
.callsheet { background: #fff; color: #000; border: 1px solid var(--border); border-radius: 6px; padding: 36px 42px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.cs-head { display: flex; align-items: center; gap: 10px; }
.cs-logo { width: 32px; height: 32px; object-fit: contain; }
.cs-ws { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.callsheet h1 { font-size: 22px; }
.callsheet h2 { font-size: 14px; margin-top: 8px; }
.callsheet h3 { font-size: 12.5px; }
.callsheet table { width: 100%; border-collapse: collapse; }
.callsheet th, .callsheet td { border: 1px solid #000; padding: 5px 8px; text-align: left; vertical-align: top; }
.callsheet th { background: #eee; font-weight: 600; }
.cs-sum th { width: 140px; }
.cs-t { width: 90px; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cs-meta { color: #333; overflow-wrap: anywhere; }
.cs-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-shoot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #000; padding-top: 10px; break-inside: avoid; }
.cs-list { margin: 0; padding-left: 18px; }
.cs-kit { list-style: none; margin: 0; padding: 0; }
/* the format bible: the call sheet's paper, read like a page of Content formats */
.bible-line { font-weight: 600; font-size: 13.5px; }
.bible-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid #000; font-style: italic; }
@media print {
  @page { size: A4; margin: 14mm; }
  .cs-page { padding: 0; max-width: none; }
  .callsheet { border: 0; border-radius: 0; padding: 0; }
  .callsheet th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .callsheet a { color: #000; text-decoration: none; }
}
@media (max-width: 820px) {
  .sg-pps { grid-template-columns: 1fr; }
  .ep-beats { grid-template-columns: 1fr; gap: 2px; }
  .ep-beats .label { padding-top: 6px; }
  .beat-row { grid-template-columns: 24px minmax(0, 1fr) repeat(3, auto); }
  .beat-row > input:nth-of-type(2) { grid-column: 2 / -1; grid-row: 2; }
  .bld-grid { grid-template-columns: 1fr; }
  .script-cmp { grid-template-columns: 1fr; }
  .crewrow { grid-template-columns: 1fr 1fr; }
  .callsheet { padding: 20px 16px; }
}