/* ============================================================
   Academy Model Stations — the signalling panel editor.
   Loaded after signalling-panel.css (the palette) and generator.css
   (the authoring shell: top bar, blocks, fields, cards).

   Two columns, and the split is the point: what the board is written
   as on the left, what the board does on the right. The right column
   is a live runtime, so it is given the height and left alone.
   ============================================================ */

/* The workbench takes the width it is given. generator.css caps #page
   at 1660px and centres it, which is right for a form and wrong here:
   the top bar spans the viewport, so a centred column beneath it hangs
   the bar's controls over dead gutters — and the live board on the
   right has real use for every pixel. Same 22px inset as the bar, so
   the two line up at both edges. */
#page{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,44%);
  gap:18px;padding:18px 22px 60px;align-items:start;
  max-width:none;margin:0;}
.editside{min-width:0;display:flex;flex-direction:column;gap:14px;}
.viewside{position:sticky;top:70px;display:flex;flex-direction:column;gap:8px;}

.origin{margin:0;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  letter-spacing:.06em;}
.topbar-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.who{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);}
.badge{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--case-edge);border-radius:2px;padding:4px 10px;
  color:var(--ink-2);white-space:nowrap;}
.badge.ok{color:#9fe6b4;border-color:rgba(34,197,94,.42);}
.badge.warn{color:var(--amber);border-color:rgba(255,176,32,.42);}
.badge.bad{color:#ff9a91;border-color:rgba(255,68,56,.45);}

/* ---- tabs ---- */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--case-edge);padding-bottom:10px;}
.tabs button{font-size:13px;padding:7px 13px;background:transparent;border-color:transparent;
  color:var(--ink-3);}
.tabs button:hover{color:var(--ink-2);background:#141f28;}
.tabs button[aria-pressed="true"]{color:var(--ink);background:#1d3243;border-color:#3d5b70;}

/* ---- the live board ---- */
.viewhead h2{font-family:"Barlow Condensed",sans-serif;font-size:16px;letter-spacing:.16em;
  text-transform:uppercase;margin:0;}
.viewhead h2::before{content:none;}
.viewhead p{margin:2px 0 0;font-size:12px;color:var(--ink-3);}
#preview{width:100%;height:min(620px,68vh);border:1px solid var(--case-edge);border-radius:3px;
  background:var(--void);}

/* ---- editing ---- */
.block{margin-bottom:0;}
.block > h3{margin-bottom:4px;}
.why{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin:0 0 10px;max-width:78ch;}
.small{font-size:11.5px;}
.mono{font-family:"IBM Plex Mono",monospace;}

/* the table sizes to its columns and the box around it scrolls — a
   signal has fourteen properties and squeezing them is not an option */
table.edit{border-collapse:collapse;width:auto;min-width:100%;font-size:13px;}
.editside .scroll{overflow-x:auto;margin-left:0;padding-bottom:4px;}
table.edit th{font-family:"Barlow Condensed",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding:0 8px 6px 0;border-bottom:1px solid var(--case-edge);white-space:nowrap;}
table.edit td{padding:4px 8px 4px 0;border-bottom:1px solid rgba(29,44,57,.6);vertical-align:middle;}
table.edit tr.picked td{background:rgba(127,215,255,.07);}
table.edit.read td{font-size:12.5px;color:var(--ink-2);padding:6px 14px 6px 0;}
table.edit.read td.mono{color:var(--rail);}

.cell{font:inherit;font-size:13px;color:var(--ink);background:#101c25;border:1px solid #2c4557;
  border-radius:2px;padding:5px 8px;min-width:0;}
.cell:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
.cell-s{width:74px;} .cell-m{width:132px;} .cell-l{width:200px;}
select.cell{color:var(--cyan);}
input[type=checkbox].cell{width:15px;height:15px;accent-color:var(--cyan);}

.rowacts{display:flex;flex-wrap:wrap;gap:6px;white-space:nowrap;}
.rowacts.wide{margin:12px 0;}
button.tiny{font-size:11.5px;padding:5px 10px;letter-spacing:.1em;}
button.tiny.danger{color:#ff9a91;border-color:#5a2620;background:#1a1113;}
button.tiny.danger:hover{background:#241417;}
button.primary{background:#1d3a2a;border-color:#2f6244;color:#c8f2d8;}
button.primary:hover{background:#24493a;}

.hintrow{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.hintrow textarea{flex:1;font:inherit;font-size:13px;color:var(--ink);background:#101c25;
  border:1px solid #2c4557;border-radius:2px;padding:8px 10px;line-height:1.5;}
textarea{font-family:"IBM Plex Sans",sans-serif;}
.editside textarea{width:100%;font-size:13px;color:var(--ink);background:#101c25;
  border:1px solid #2c4557;border-radius:2px;padding:8px 10px;}

.nudge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.nudgeval{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--cyan);}

.chipwrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.chipwrap button.chip{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;
  text-transform:none;padding:4px 9px;background:transparent;border:1px solid var(--case-edge);
  color:var(--ink-3);}
.chipwrap button.chip:hover{color:var(--ink);background:#1a2b38;}
.chipwrap button.chip.pick{color:var(--rail);border-color:#3d5b70;background:var(--plate);}
.chipwrap.muted{max-height:132px;overflow-y:auto;}

/* ---- the palette, and the thing that follows the pointer out of it ---- */
.palette{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-bottom:12px;}
.pal-item{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;gap:2px 10px;
  align-items:center;text-align:left;padding:9px 12px;background:var(--plate);
  border:1px solid var(--case-edge);border-radius:3px;text-transform:none;letter-spacing:0;
  font-family:"IBM Plex Sans",sans-serif;cursor:grab;touch-action:none;}
.pal-item:hover{background:#1a2b38;border-color:#3d5b70;}
.pal-item:active{cursor:grabbing;}
.pal-label{font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);}
.pal-on{grid-column:2;font-size:11px;color:var(--ink-3);}
/* each mark is the thing itself, drawn the way the board draws it */
.pal-mark{grid-row:1/3;width:26px;height:26px;border-radius:50%;position:relative;}
.pal-mark::after{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:#f0a63c;}
.pal-mark::before{content:"";position:absolute;left:9px;top:2px;width:9px;height:9px;border-radius:50%;z-index:1;}
.pal-mark.stop::before{background:var(--red);}
.pal-mark.distant::before{background:var(--amber);}
.pal-mark.callon::before{background:transparent;border:2px solid var(--ink);width:7px;height:7px;}
.pal-mark.shunt::before{background:var(--ink);width:6px;height:6px;left:10px;top:4px;}
.pal-mark.point::before{background:transparent;border:1px solid #ffd166;width:18px;height:9px;
  border-radius:2px;left:3px;top:2px;}
.pal-mark.exit::before{background:transparent;border:1px solid #eaf6ff;width:20px;height:9px;
  border-radius:2px;left:2px;top:2px;}
.pal-mark.point::after,.pal-mark.exit::after{top:17px;}

.dragghost{position:fixed;z-index:200;pointer-events:none;
  font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);background:var(--case);border:1px solid var(--case-edge);
  border-radius:2px;padding:4px 9px;}
.dragghost.over{color:var(--cyan);border-color:var(--cyan);}
body.arranging #preview{border-color:#3d5b70;box-shadow:0 0 0 1px rgba(127,215,255,.25);}
.snapline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);}
.snapline input{width:15px;height:15px;accent-color:var(--cyan);}
.readout{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--cyan);
  border:1px solid var(--case-edge);border-radius:2px;padding:6px 9px;background:#101c25;}

/* ---- findings ---- */
.findings{list-style:none;margin:0;padding:0;}
.findings li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 0;
  border-bottom:1px solid rgba(29,44,57,.7);font-size:13px;color:var(--ink-2);}
.findings li b{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;min-width:70px;}
.findings li.error b{color:#ff9a91;}
.findings li.warning b{color:var(--amber);}
.findings li span{flex:1;min-width:200px;}

.yamlout{font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.55;color:var(--ink-2);
  background:#0b1219;border:1px solid var(--case-edge);border-radius:3px;padding:14px 16px;
  max-height:460px;overflow:auto;white-space:pre;}
.formwarn{margin:0 0 12px;padding:9px 13px;font-size:12.5px;color:#ffd8a8;background:#241a10;
  border:1px solid #5a4620;border-radius:3px;}
.card h4{font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin:0;}

@media (max-width:1100px){
  #page{grid-template-columns:1fr;}
  .viewside{position:static;order:-1;}
  #preview{height:min(420px,52vh);}
}
@media (max-width:640px){
  #page{padding:14px 12px 50px;}
  .topbar{padding:8px 12px;}
  .origin{width:100%;}
}

/* The way through to the track graph explorer, at the top right of the
   Track graph section. The rule line the block headings carry is a
   flex child too, so the icon is ordered after it and the line pushes
   it to the end rather than any margin doing the work. */
.block > h3 > .graphlink{order:1;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:24px;height:24px;color:var(--ink-3);background:var(--case);
  border:1px solid var(--case-edge);border-radius:2px;text-decoration:none;}
.block > h3 > .graphlink:hover{color:var(--cyan);background:#1a2b38;border-color:#2c4557;}
.block > h3 > .graphlink:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.block > h3 > .graphlink svg{width:14px;height:14px;display:block;}