/* Hubble Social — videoscripts, productiebord, teleprompter, pdf-document */

/* productiebord */
.board { display: grid; grid-template-columns: repeat(5, minmax(172px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.bcol { background: var(--sand); border-radius: var(--r); padding: 10px; min-height: 220px; transition: background .15s, box-shadow .15s; }
.bcol.drop { background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange); }
.bcol-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; }
.bcol-h b { font: 700 14px var(--heading); } .bcol-h small { color: var(--muted); font-weight: 700; }
.bcol-b { display: flex; flex-direction: column; gap: 8px; }
.bempty { border: 1.5px dashed var(--sand-2); border-radius: 12px; padding: 18px 10px; text-align: center; color: var(--muted-2); font-size: 12px; }
.sccard { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--cc); border-radius: 12px; padding: 11px 12px; box-shadow: var(--shadow); cursor: grab; transition: transform .12s, box-shadow .12s; }
.sccard:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(25,25,25,.08); }
.sccard.dragging { opacity: .45; }
.sc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sc-top .cname { font-size: 11.5px; }
.sc-title { font-size: 14px; line-height: 1.3; }
.sc-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.sc-shoot { font-size: 11.5px; color: var(--blue); font-weight: 600; } .sc-shoot.late { color: var(--red); }
.sc-foot { display: flex; align-items: center; gap: 8px; min-height: 0; }
.pb-track.mini { height: 5px; }
.shootcard { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; margin-bottom: 16px; }
.shootcard > .ic { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }
.shootcard .chips { margin-top: 6px; }

/* nieuw script */
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tplcard { text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 3px; }
.tplcard b { font-size: 13.5px; } .tplcard small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.tplcard:hover { border-color: #D6CEBE; } .tplcard.is-on { border-color: var(--orange); background: var(--orange-50); }

/* editor */
.sc-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sc-head .eyebrow { display: flex; align-items: center; }
.sc-head > .grow { flex: 1 1 380px; min-width: 0; }
.sc-titlein { width: 100%; border: 0; background: transparent; font: 700 34px/1.15 var(--heading); letter-spacing: -.01em; padding: 2px 0; border-bottom: 2px solid transparent; }
.sc-titlein:hover { border-bottom-color: var(--line); } .sc-titlein:focus { outline: 0; border-bottom-color: var(--orange); }
.sc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.sc-side .sticky > * + * { margin-top: 14px; }
.sc-side .card { padding: 18px; }
.sc-metagrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.sc-metagrid .field { margin-bottom: 12px; }
.share-t { font-size: 13.5px; padding-top: 4px; }
.sc-tabs { display: flex; gap: 8px; margin: 16px 0 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 4; background: var(--paper); padding: 8px 0; }
.sctab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 16px 9px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); min-width: 110px; position: relative; text-align: left; }
.sctab i { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--sc, var(--muted)); }
.sctab b { font: 700 15px var(--heading); } .sctab small { font-size: 11.5px; color: var(--muted); }
.sctab:hover { border-color: #D6CEBE; } .sctab.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.scsec { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.scsec-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 10%, white), white 60%); }
.scsec-l { font: 800 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--sc); padding: 4px 10px; border-radius: 7px; }
.scsec-d { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.scgrid-h, .screw { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.15fr) 96px 66px; gap: 10px; align-items: start; }
.scgrid-h { padding: 8px 16px 4px; font: 600 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.scgrid-h .ic { vertical-align: -2px; }
.screw { padding: 8px 16px; border-top: 1px dashed var(--line); }
.screw:first-of-type { border-top: 0; }
.screw.shot .scnr { background: var(--green); }
.scnr { width: 26px; height: 26px; border-radius: 99px; background: var(--sc); color: #fff; display: grid; place-items: center; font: 800 12px var(--body); margin-top: 6px; }
.screw .textarea { min-height: 54px; resize: none; overflow: hidden; font-size: 13.5px; line-height: 1.45; }
.screw .scs { font-size: 14px; background: #FFFDF9; }
.scmedia { display: flex; gap: 6px; align-items: flex-start; min-height: 54px; }
.scadd { width: 44px; height: 54px; border: 1.5px dashed var(--sand-2); border-radius: 10px; display: grid; place-items: center; color: var(--muted); cursor: pointer; background: var(--paper); }
.scadd:hover { border-color: var(--orange); color: var(--orange-d); background: var(--orange-50); }
.scadd .ic { width: 16px; height: 16px; }
.scthumb { position: relative; }
.mthumb.sc { width: 92px; height: 70px; }
.scx { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 99px; background: var(--ink); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.scthumb:hover .scx, .scx:focus-visible { opacity: 1; }
.scx .ic { width: 11px; height: 11px; }
.scact { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-top: 6px; }
.scsec-time { font: 700 12px var(--body); color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.scsec-time:hover { background: var(--sand); color: var(--ink); }
.scsec-add { display: flex; gap: 8px; padding: 10px 16px 14px 56px; }
.durbig b { font: 700 36px var(--heading); letter-spacing: -.02em; } .durbig small { margin-left: 6px; color: var(--muted); font-size: 13px; }
.durbar { position: relative; display: flex; gap: 2px; height: 10px; border-radius: 9px; background: var(--sand); overflow: visible; margin: 10px 0 8px; }
.durbar i { display: block; height: 100%; } .durbar i:first-child { border-radius: 9px 0 0 9px; }
.durmark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.durleg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.durleg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.popmenu .pm.danger b { color: var(--red); }
/* alleen lezen (klantportaal) */
.scgrid-h.ro, .screw.ro { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.15fr) 96px; }
.screw.ro p { margin: 6px 0; font-size: 14px; }
.scsec.ro { --sc: var(--sc); }

/* hookbank */
.hblist { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.hbrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.hbrow p { margin: 0; font-weight: 600; font-size: 14px; } .hbrow small { grid-column: 1; font-size: 12px; display: flex; align-items: center; }
.hbrow .row-gap { grid-row: 1 / span 2; grid-column: 2; }

/* opnamelijst */
.shotlist { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; }
.shotrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.shotrow input { width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.shotrow .scnr { margin: 0; flex: none; }
.shotrow b { display: block; font-size: 13.5px; } .shotrow small { color: var(--muted); font-size: 12px; }
.shotrow.done { background: var(--green-50); border-color: #CDE5D6; } .shotrow.done b { text-decoration: line-through; color: var(--muted); }

/* teleprompter */
.tele { position: fixed; inset: 0; z-index: 100; background: #0E0E0D; color: #fff; display: flex; flex-direction: column; }
.tele-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #191919; border-bottom: 1px solid #2C2A27; flex-wrap: wrap; font-size: 13px; color: #BDB8AE; }
.tele-bar .tb { background: #2A2825; border-color: #3C3A35; color: #fff; }
.tele-bar kbd { background: #34322E; border-color: #3C3A35; color: #BDB8AE; }
.tele-bar input[type=range] { accent-color: var(--orange); vertical-align: middle; width: 110px; }
.tele-t { font-weight: 700; color: #fff; }
.tele-view { position: relative; flex: 1; overflow: hidden; }
.tele-line-mark { position: absolute; left: 0; right: 0; top: 30%; height: 2px; background: rgba(255,104,44,.6); z-index: 1; pointer-events: none; }
.tele-text { padding: 30vh 8vw 0; line-height: 1.3; font-family: var(--heading); font-weight: 600; will-change: transform; transform-origin: center top; }
.tl { margin-bottom: 1.2em; }
.tl-k { display: block; font: 800 .28em var(--body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .2em; }
.tl-b { display: none; font: 500 .38em var(--body); color: #8F8A80; margin-bottom: .2em; }
.tele.show-beeld .tl-b { display: block; }
.tl p { margin: 0; }
.tl i { color: #6F6A61; font-size: .5em; }

/* overige koppelingen */
.cchip.shoot { background: var(--blue-50); border-left-color: var(--blue); color: var(--blue); }
.cchip.shoot .ic { width: 12px; height: 12px; color: var(--blue); flex: none; }
.pillar-f { margin: 14px 0 0; } .pillar-f .seg button { display: inline-flex; align-items: center; }
.pillar-f .cdot { width: 8px; height: 8px; margin-right: 6px; }
.script-link { margin: 14px 0 0; align-items: center; } .script-link:hover { background: var(--orange-100); }
.pillars-card { margin-bottom: 18px; }
.pilrows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pilrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilrow .input.sm[data-k=name] { flex: 1; min-width: 160px; }
.pilrow label { display: inline-flex; align-items: center; gap: 6px; }
.sw.sm { width: 20px; height: 20px; border-width: 2px; }

/* ---------- het pdf-document (wordt buiten beeld opgemaakt) ---------- */
.sdoc-host { position: fixed; left: -10000px; top: 0; width: 794px; pointer-events: none; }
.sd-page { width: 794px; height: 1123px; background: #fff; position: relative; display: flex; flex-direction: column; padding: 42px 52px 0; box-sizing: border-box; font-family: Inter, sans-serif; color: #191919; overflow: hidden; }
.sd-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #E8E2D5; margin-bottom: 18px; }
.sd-head img { width: 104px; height: auto; }
.sd-head span { font: 600 10.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9A948A; max-width: 60%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-body { flex: 1; overflow: hidden; min-height: 0; height: 960px; max-height: 960px; }
.sd-foot { height: 52px; flex: none; display: flex; align-items: center; gap: 10px; border-top: 1px solid #E8E2D5; font: 500 10px Inter, sans-serif; color: #9A948A; }
.sd-foot img { width: 16px; height: auto; } .sd-foot span:nth-child(2) { flex: 1; } .sd-pn { font-weight: 700; color: #6E6960; }
.sd-cover { padding: 6px 0 22px; }
.sd-eyebrow { font: 700 11px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #E8551A; margin-bottom: 8px; }
.sd-cover h1 { font: 700 34px/1.12 Outfit, sans-serif; margin: 0 0 18px; letter-spacing: -.01em; color: #191919; }
.sd-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sd-meta div { background: #FAF8F3; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.sd-meta span, .sd-props span { font: 600 9.5px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9A948A; }
.sd-meta b { font: 600 12.5px Inter, sans-serif; color: #191919; }
.sd-props { margin-top: 10px; background: #FAF8F3; border-radius: 10px; padding: 9px 11px; font: 400 12px/1.45 Inter, sans-serif; white-space: pre-wrap; }
.sd-props span { display: block; margin-bottom: 2px; }
.sd-sec { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 8px 12px; border-radius: 9px; background: #FAF8F3; border-left: 4px solid var(--sc); }
.sd-sec b { font: 800 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--sc); }
.sd-sec span { flex: 1; font: 400 11px Inter, sans-serif; color: #6E6960; }
.sd-sec em { font: 700 12px Inter, sans-serif; font-style: normal; color: #2A2926; }
.sd-colh, .sd-row { display: grid; grid-template-columns: 28px 1fr 1.1fr; gap: 12px; }
.sd-colh { padding: 4px 4px 4px; font: 700 9.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #9A948A; }
.sd-row { padding: 9px 4px; border-bottom: 1px solid #EEE9DF; break-inside: avoid; }
.sd-nr { width: 22px; height: 22px; border-radius: 99px; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 10.5px Inter, sans-serif; }
.sd-beeld { display: flex; flex-direction: column; gap: 6px; }
.sd-beeld img { width: 190px; max-height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid #EEE9DF; }
.sd-beeld p, .sd-spraak p { margin: 0; font: 400 12.5px/1.5 Inter, sans-serif; white-space: pre-wrap; color: #2A2926; }
.sd-spraak p { font: 500 13px/1.5 Inter, sans-serif; color: #191919; }
.sd-spraak small { display: block; margin-top: 4px; font: 600 10px Inter, sans-serif; color: #9A948A; }
.sd-row i, .sd-shot i { color: #C9C2B5; }
.sd-shot { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #EEE9DF; }
.sd-shot img { width: 70px; height: 48px; object-fit: cover; border-radius: 6px; }
.sd-shot b { display: block; font: 600 12.5px/1.4 Inter, sans-serif; } .sd-shot small { font: 500 10px Inter, sans-serif; color: #9A948A; }
.sd-box { width: 16px; height: 16px; border: 1.5px solid #9A948A; border-radius: 4px; flex: none; }

@media (max-width: 1200px) { .sc-layout { grid-template-columns: minmax(0, 1fr); } .sc-side .sticky { position: static; } }
@media (max-width: 820px) {
  .board { grid-template-columns: repeat(5, 78vw); }
  .sc-metagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scgrid-h { display: none; }
  .screw, .screw.ro { grid-template-columns: 30px minmax(0, 1fr); }
  .screw > .scs, .screw > .scmedia, .screw > .scact, .screw.ro > p + p, .screw.ro > div { grid-column: 2; }
  .scact { flex-direction: row; justify-content: flex-end; padding-top: 0; }
  .scsec-add { padding-left: 16px; }
  .sc-titlein { font-size: 26px; }
  .tele-text { padding: 30vh 5vw 0; }
}

/* koppellink: openbare pagina voor de klant */
.clink { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--orange-50), var(--paper) 60%); }
.clink-card { width: min(640px, 100%); background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 34px 36px; }
.clink-card h1 { font-size: 32px; margin: 4px 0 8px; } .clink-card h1 .dot { color: var(--orange); }
.clink-card .eyebrow { display: flex; align-items: center; }
.clink-foot { margin-top: 18px; font-size: 12px; color: var(--muted-2); }
.clprog { margin: 18px 0 12px; } .clprog .pb-track { height: 9px; } .clprog small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; } .clprog b { color: var(--ink); }
.cllist { display: flex; flex-direction: column; gap: 8px; }
.clrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.clrow b { display: block; font-size: 15px; } .clrow small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.clrow.ok { background: var(--green-50); border-color: #CDE5D6; } .clrow .okt { color: var(--green); font-weight: 600; }
.clrow .btn { flex: none; }
.clmore { margin-top: 14px; } .clmore summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.clsafe { display: flex; gap: 10px; margin: 18px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--paper); font-size: 13px; }
.clsafe .ic { color: var(--green); margin-top: 1px; }
.clpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.clp { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.clp:has(input:checked) { border-color: var(--orange); background: var(--orange-50); }
.clp input { accent-color: var(--orange); }
@media (max-width: 600px) { .clink-card { padding: 24px 18px; } .clrow { flex-wrap: wrap; } .clrow .btn { width: 100%; } }

/* ---------- tweestapsverificatie ---------- */
.input.otp { font-size: 22px; letter-spacing: .18em; text-align: center; padding: 12px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tfa-left { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); padding: 9px 12px; border-radius: var(--r-sm); background: var(--green-50); }
.tfa-left .ic { color: var(--green); flex: none; }
.tfa-left.low { background: var(--amber-50); }
.tfa-left.low .ic { color: var(--amber); }
.tfa-steps { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 16px; font-size: 14px; }
.tfa-steps li::marker { color: var(--orange); font-weight: 700; }
.tfa-qr { display: flex; justify-content: center; margin: 14px 0 6px; }
.tfa-qr svg { width: 220px; height: auto; max-width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.tfa-manual { margin-top: 8px; font-size: 13.5px; }
.tfa-manual summary { cursor: pointer; color: var(--muted); }
.tfa-manual .input { letter-spacing: .08em; }
.tfa-open { display: none; }
@media (hover: none) and (pointer: coarse) { .tfa-open { display: inline-flex; } }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; padding: 14px; border-radius: var(--r-sm); background: var(--paper); border: 1px dashed var(--line); }
.tfa-codes span { font-size: 15px; text-align: center; letter-spacing: .06em; color: var(--ink); }
.tfa-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--sand); color: var(--muted); }
.tfa-tag.on { background: var(--green-50); color: var(--green); }
.tfa-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }