/* Studio L308 Student Toolkit
   Interactive learning tools for the Television: Planning and Production unit.
   Uses the brand tokens already defined in l308-style.css (--cyan, --magenta, etc.). */

.tk{max-width:var(--maxw);margin:0 auto;}
.tk *{box-sizing:border-box;}

/* Tool shell */
.tk-tool{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin-bottom:34px;box-shadow:var(--shadow-sm);}
.tk-tool__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.tk-tool__ico{flex:none;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;}
.tk-tool__head h3{margin:0 0 4px;font-family:var(--font-display);font-size:1.35rem;}
.tk-tool__head p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.5;}

/* Buttons / chips */
.tk-chips{display:flex;flex-wrap:wrap;gap:8px;}
.tk-chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 15px;cursor:pointer;font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--ink);transition:transform .12s ease,border-color .12s ease;}
.tk-chip:hover{transform:translateY(-1px);border-color:var(--ink);}
.tk-chip.is-on{color:#fff;border-color:transparent;}
.tk-chip.is-on.on-yellow{color:#14181F;}

/* Stage selector */
.tk-stages{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.tk-stage{flex:1;min-width:96px;border:1.5px solid var(--line);background:var(--paper);border-radius:14px;padding:12px 8px;cursor:pointer;text-align:center;font-weight:600;font-size:.85rem;color:var(--ink);transition:border-color .12s ease,background .12s ease;}
.tk-stage .tk-stage__ic{display:block;font-size:22px;margin-bottom:4px;}
.tk-stage.is-on{border-color:var(--ink);background:var(--paper-3);}

/* Result panel */
.tk-panel{background:var(--paper-2);border-radius:var(--radius);padding:20px 22px;margin-top:18px;}
.tk-panel__h{margin:0 0 4px;font-family:var(--font-display);font-size:1.1rem;}
.tk-panel__sub{margin:0 0 12px;color:var(--ink-soft);font-size:.88rem;}
.tk-panel__body{margin:0;font-size:1rem;line-height:1.6;}
.tk-panel__body b{font-weight:700;}
.tk-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;}
.tk-tag{font-size:.8rem;font-weight:600;padding:4px 11px;border-radius:999px;color:#fff;}
.tk-tag.on-yellow{color:#14181F;}

/* Running order builder */
.tk-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.tk-input,.tk-select{font-family:var(--font-body);font-size:.95rem;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper);color:var(--ink);}
.tk-input:focus,.tk-select:focus{outline:none;border-color:var(--cyan);}
.tk-seg{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:8px;}
.tk-seg__grip{cursor:grab;color:var(--ink-soft);font-size:1.1rem;flex:none;}
.tk-seg__name{flex:1;font-weight:600;}
.tk-seg__time{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem;flex:none;}
.tk-seg__del{flex:none;border:none;background:none;cursor:pointer;color:var(--ink-soft);font-size:1.1rem;line-height:1;padding:2px 6px;border-radius:8px;}
.tk-seg__del:hover{background:var(--paper-3);color:var(--red);}
.tk-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-weight:700;font-family:var(--font-display);}
.tk-total__val{font-size:1.4rem;font-variant-numeric:tabular-nums;}
.tk-meter{height:10px;border-radius:999px;background:var(--paper-3);overflow:hidden;margin-top:10px;}
.tk-meter__fill{height:100%;width:0;background:var(--green);transition:width .3s ease,background .3s ease;}

/* Analysis trainer */
.tk-step{display:none;}
.tk-step.is-on{display:block;}
.tk-progress{display:flex;gap:6px;margin-bottom:16px;}
.tk-progress__dot{flex:1;height:6px;border-radius:999px;background:var(--paper-3);}
.tk-progress__dot.done{background:var(--cyan);}
.tk-q{font-family:var(--font-display);font-size:1.15rem;margin:0 0 6px;}
.tk-hint{color:var(--ink-soft);font-size:.9rem;margin:0 0 12px;line-height:1.5;}
.tk-textarea{width:100%;min-height:96px;font-family:var(--font-body);font-size:.95rem;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;resize:vertical;color:var(--ink);background:var(--paper);}
.tk-textarea:focus{outline:none;border-color:var(--cyan);}
.tk-count{font-size:.82rem;color:var(--ink-soft);margin-top:6px;}
.tk-count.ok{color:var(--green);font-weight:600;}
.tk-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;}

/* Generic small button */
.tk-btn{font-family:var(--font-display);font-weight:700;font-size:.92rem;border:none;border-radius:999px;padding:11px 22px;cursor:pointer;color:#fff;background:var(--ink);transition:transform .12s ease,opacity .12s ease;}
.tk-btn:hover{transform:translateY(-1px);}
.tk-btn:disabled{opacity:.4;cursor:default;transform:none;}
.tk-btn--ghost{background:none;color:var(--ink);border:1.5px solid var(--line);}
.tk-btn--cyan{background:var(--cyan);}
.tk-btn--magenta{background:var(--magenta);}

/* Shot list starter */
.tk-shot{display:grid;grid-template-columns:32px 1fr 1fr auto;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:8px;}
.tk-shot__n{font-weight:700;color:var(--ink-soft);text-align:center;}
.tk-out{white-space:pre-wrap;font-family:var(--font-body);font-size:.9rem;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;line-height:1.5;}

.tk-note{font-size:.82rem;color:var(--ink-soft);margin-top:10px;line-height:1.5;}

@media(max-width:640px){
  .tk-shot{grid-template-columns:28px 1fr auto;}
  .tk-shot__type{grid-column:2 / 4;}
}

/* ---- Idea spinner ---- */
.tk-spinner{background:var(--paper-2);border-radius:var(--radius);padding:16px 18px;}
.tk-spin__row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);}
.tk-spin__row:last-child{border-bottom:0;}
.tk-spin__lab{flex:none;width:62px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:700;}
.tk-spin__val{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);}

/* ---- Shot-type reference ---- */
.tk-shotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.tk-shotcard{border:1.5px solid var(--line);background:var(--paper);border-radius:14px;padding:10px;cursor:pointer;text-align:center;transition:border-color .12s ease,transform .12s ease;}
.tk-shotcard:hover{transform:translateY(-1px);border-color:var(--ink);}
.tk-shotcard.is-on{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(40,170,220,.25);}
.tk-shotcard__frame{display:block;height:48px;border:2px solid var(--ink-soft);border-radius:6px;margin-bottom:8px;position:relative;overflow:hidden;background:var(--paper-3);}
.tk-shotcard__frame span{position:absolute;background:var(--cyan);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);}
.tk-frame--wide span{width:14px;height:14px;top:62%;}
.tk-frame--mid span{width:26px;height:26px;top:60%;}
.tk-frame--close span{width:40px;height:40px;top:64%;}
.tk-frame--xclose span{width:60px;height:60px;}
.tk-frame--two span{width:18px;height:18px;left:34%;box-shadow:20px 0 0 var(--magenta);}
.tk-frame--ots span{width:22px;height:30px;top:64%;left:64%;box-shadow:-30px 6px 0 -4px var(--ink-soft);}
.tk-frame--cut span{width:20px;height:14px;border-radius:3px;background:var(--yellow);}
.tk-frame--p2c span{width:30px;height:30px;top:58%;background:var(--red);}
.tk-shotcard__label{font-size:.82rem;font-weight:600;color:var(--ink);}

/* ---- Producible checker ---- */
.tk-pq{margin-bottom:16px;}
.tk-pq__q{font-weight:600;margin-bottom:8px;font-size:.96rem;}

/* ---- Role-rotation tracker ---- */
.tk-rot{overflow-x:auto;}
.tk-rottable{border-collapse:collapse;width:100%;font-size:.84rem;}
.tk-rottable th,.tk-rottable td{border:1px solid var(--line);padding:6px 8px;text-align:center;}
.tk-rottable thead th{background:var(--paper-2);vertical-align:bottom;}
.tk-rottable thead th span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:.74rem;font-weight:600;max-height:96px;}
.tk-rotname{text-align:left !important;font-weight:600;white-space:nowrap;}
.tk-rotcount{font-weight:700;font-variant-numeric:tabular-nums;}
.tk-tick{width:24px;height:24px;border:1.5px solid var(--line);background:var(--paper);border-radius:7px;cursor:pointer;color:#fff;font-size:.9rem;line-height:1;}
.tk-tick.is-on{background:var(--green);border-color:var(--green);}