/* junior — page chrome on top of the tinymachines kit (tokens + components).
   Rules: paper is documentation, panel is the machine talking, everything is
   a multiple of 4px, nothing over 240ms. */

html, body { margin: 0; min-height: 100%; }
body.paper { display: flex; flex-direction: column; min-height: 100dvh; }
a { color: var(--color-blue-ink); }

.jr-top {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  border-bottom: 1px solid var(--color-rule);
}
.jr-brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); text-decoration: none; color: var(--color-ink); font-size: var(--text-body); }
.jr-mark {
  display: grid; place-items: center; width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  background: var(--color-ink); color: var(--color-mustard);
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.08em; border-radius: var(--radius-hair);
}
.jr-top { flex-wrap: wrap; }
.jr-topnav { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3) calc(var(--u) * 4); font-family: var(--font-mono); font-size: var(--text-fine); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.jr-topnav a { color: var(--color-ink-muted); text-decoration: none; border-bottom: 1px solid var(--color-ink-faint); }
.jr-topnav a:hover { color: var(--color-ink); }
.jr-lock { padding: calc(var(--u) * 1) calc(var(--u) * 2.5); font-size: var(--text-fine); }
/* Who is signed in. Each person has their own PIN, so this is a real fact
   about the session, not decoration. */
.jr-who { border-color: var(--color-forest-ink); color: var(--color-forest-ink); }

.jr-main { flex: 1; width: min(960px, 100% - calc(var(--u) * 8)); margin: 0 auto; padding: calc(var(--u) * 6) 0 calc(var(--u) * 10); }
.jr-section { margin-top: calc(var(--u) * 10); }
.jr-masthead { margin-bottom: calc(var(--u) * 2); }

.jr-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 5); border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono); font-size: var(--text-micro); color: var(--color-ink-muted);
}

/* --- gate ------------------------------------------------------------ */
.jr-gate { min-height: 60dvh; display: grid; place-items: center; }
.jr-gate__card {
  box-sizing: border-box; width: min(380px, 100%); padding: calc(var(--u) * 8) calc(var(--u) * 7);
  background: var(--color-paper); border: 1px solid var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink);
  text-align: center;
}
.jr-gate__lede { color: var(--color-ink-muted); margin: calc(var(--u) * 2) 0 calc(var(--u) * 5); }
.jr-gate__input {
  width: 100%; box-sizing: border-box; padding: calc(var(--u) * 3);
  font-family: var(--font-mono); font-size: var(--text-h3); letter-spacing: 0.22em; text-align: center;
  background: var(--color-paper-sunk); border: 1px solid var(--color-ink-faint); border-radius: var(--radius-hair); color: var(--color-ink);
}
.jr-gate__input:focus { outline: 2px solid var(--color-blue-ink); outline-offset: 2px; }
.jr-gate__go { width: 100%; justify-content: center; margin-top: calc(var(--u) * 4); }
.jr-gate__err { margin: calc(var(--u) * 3) 0 0; color: var(--color-red-ink); font-weight: 600; font-size: var(--text-body); }

/* --- status panel ---------------------------------------------------- */
.jr-refresh { background: none; border: 1px solid var(--color-rule-panel); color: var(--color-glass-muted); font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 2px calc(var(--u) * 2); cursor: pointer; }
.jr-refresh:hover { color: var(--color-glass); border-color: var(--color-glass-muted); }
.jr-status { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
@media (max-width: 640px) { .jr-status { grid-template-columns: 1fr; } }
.jr-wan {
  display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 3);
  background: var(--color-panel-sunk); border: 1px solid var(--color-rule-panel); border-left: 3px solid var(--color-drive-float);
  font-family: var(--font-mono); font-size: var(--text-data);
}
.jr-wan__name { color: var(--color-glass-muted); font-size: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.jr-wan__state { font-size: var(--text-lead); font-weight: 500; color: var(--color-glass); }
.jr-wan[data-state="online"] { border-left-color: var(--color-forest); }
.jr-wan[data-state="online"] .jr-wan__state { color: var(--color-forest); }
.jr-wan[data-state="offline"] { border-left-color: var(--color-red); }
.jr-wan[data-state="offline"] .jr-wan__state { color: var(--color-red); }
.jr-wan[data-state="private"] { border-left-color: var(--color-orange); }
.jr-wan[data-state="private"] .jr-wan__state { color: var(--color-orange); }
.jr-wan[data-primary="1"] .jr-wan__name::after { content: " · carrying the house"; color: var(--color-blue); }
.jr-wan__addr { color: var(--color-mustard); }
.jr-kv { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: calc(var(--u) * 2) calc(var(--u) * 4); margin: 0; }
.jr-kv dt { color: var(--color-glass-muted); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.jr-kv dd { margin: 0; color: var(--color-glass); }
.jr-status__note { margin: calc(var(--u) * 3) 0 0; font-family: var(--font-mono); font-size: var(--text-fine); color: var(--color-orange); }

/* --- documents ------------------------------------------------------- */
.jr-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); }
.jr-doc { display: flex; border: 1px solid var(--color-ink-faint); background: var(--color-paper); transition: box-shadow var(--t-snap) var(--ease-detent); }
.jr-doc:hover { box-shadow: 3px 3px 0 var(--color-ink); border-color: var(--color-ink); }
.jr-doc__main { flex: 1; min-width: 0; display: grid; gap: calc(var(--u) * 1); padding: calc(var(--u) * 3) calc(var(--u) * 4); text-decoration: none; color: var(--color-ink); }
.jr-doc__title { font-weight: 600; font-size: var(--text-body); display: flex; align-items: center; gap: calc(var(--u) * 2); }
.jr-doc__sum { font-family: var(--font-serif); font-size: var(--text-body); color: var(--color-ink-muted); }
.jr-doc__meta { font-size: var(--text-micro); color: var(--color-ink-muted); }
.jr-doc__dl { display: grid; place-items: center; padding: 0 calc(var(--u) * 4); border-left: 1px solid var(--color-ink-faint); font-family: var(--font-mono); font-size: var(--text-fine); text-decoration: none; color: var(--color-ink-muted); }
.jr-doc__dl:hover { background: var(--color-ink); color: var(--color-paper); }
.jr-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.jr-tbl th { text-align: left; font-family: var(--font-mono); font-size: var(--text-fine); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-ink-muted); border-bottom: 1px solid var(--color-rule); padding: calc(var(--u) * 2) calc(var(--u) * 2); }
.jr-tbl td { padding: calc(var(--u) * 2); border-bottom: 1px solid var(--color-paper-sunk); }
.jr-tbl td.num { font-family: var(--font-mono); font-size: var(--text-data); text-align: right; white-space: nowrap; }
.jr-tbl td.name { font-family: var(--font-mono); font-size: var(--text-data); overflow-wrap: anywhere; }

/* --- terminal -------------------------------------------------------- */
.jr-term__face { padding: calc(var(--u) * 2) !important; }
.jr-term__act { background: none; border: 0; color: var(--color-glass-muted); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; margin-left: calc(var(--u) * 3); }
.jr-term__act:hover { color: var(--color-glass); }
.jr-term__frame { display: block; width: 100%; height: min(560px, 70dvh); border: 0; background: var(--color-panel-sunk); }
.jr-term:fullscreen { background: var(--color-panel); padding: 0; border-radius: 0; }
.jr-term:fullscreen .jr-term__face { border-radius: 0; height: 100%; box-sizing: border-box; }
.jr-term:fullscreen .jr-term__frame { height: calc(100vh - 44px); }

/* --- a document ------------------------------------------------------ */
.jr-crumb { margin-bottom: calc(var(--u) * 2); }
.jr-doc__stamp { font-size: var(--text-fine); color: var(--color-ink-muted); margin: 0 0 calc(var(--u) * 6); }
.jr-md { font-family: var(--font-serif); font-size: var(--text-prose); line-height: 1.62; max-width: 72ch; }
.jr-md h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-tight); font-size: var(--text-h1); line-height: 0.94; margin: 0 0 calc(var(--u) * 4); }
.jr-md h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-h3); margin: calc(var(--u) * 10) 0 calc(var(--u) * 3); padding-bottom: calc(var(--u) * 1); border-bottom: 1px solid var(--color-rule); }
.jr-md h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lead); margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.jr-md p, .jr-md li { margin: 0 0 calc(var(--u) * 3); }
.jr-md code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-paper-sunk); padding: 1px 4px; border-radius: var(--radius-hair); overflow-wrap: anywhere; }
.jr-md pre { background: var(--color-panel); color: var(--color-glass); padding: calc(var(--u) * 3) calc(var(--u) * 4); border-radius: var(--radius-mod); overflow-x: auto; font-size: var(--text-data); line-height: var(--leading-data); }
.jr-md pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.jr-md table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--text-body); margin: 0 0 calc(var(--u) * 4); display: block; overflow-x: auto; }
.jr-md th, .jr-md td { text-align: left; padding: calc(var(--u) * 1.5) calc(var(--u) * 2); border-bottom: 1px solid var(--color-paper-sunk); vertical-align: top; }
.jr-md th { font-family: var(--font-mono); font-size: var(--text-fine); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-ink-muted); border-bottom-color: var(--color-rule); }
.jr-md blockquote { margin: 0 0 calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 4); border-left: 3px solid var(--color-orange-ink); background: var(--color-paper-sunk); font-size: var(--text-body); font-family: var(--font-sans); }
.jr-md hr { border: 0; border-top: 1px solid var(--color-rule); margin: calc(var(--u) * 8) 0; }
.jr-md img { max-width: 100%; }

/* --- print: Armando works from paper next to the hardware ------------ */
@media print {
  .jr-top, .jr-foot, .jr-crumb { display: none !important; }
  body.paper { background: #fff; color: #000; }
  .jr-main { width: auto; padding: 0; }
  @page { margin: 16mm 14mm; }
  .jr-md { font-size: 10.5pt; line-height: 1.45; max-width: none; }
  .jr-md h1 { font-size: 20pt; }
  .jr-md h2 { font-size: 13pt; margin-top: 16pt; break-after: avoid; }
  .jr-md h3 { font-size: 11.5pt; break-after: avoid; }
  .jr-md p, .jr-md li { orphans: 3; widows: 3; }
  .jr-md pre { background: #f4f4f4 !important; color: #000 !important; border: 0.5pt solid #999; font-size: 8.5pt; break-inside: avoid; white-space: pre-wrap; }
  .jr-md table { display: table; }
  .jr-md tr { break-inside: avoid; }
}