/* ============================================================================
   IoTLab stylesheet  |  CMN322 / CBS307 Week 15 revision CTF
   The unit theme (beamerthemeIoT.sty, dark mode), as used by Tutorials 10A/10B:
   ink top bar with the signal mark, green numbered circles, the green, amber
   and coral trace rule, 2px rounded ink task boxes, pill chips, coloured
   block headers and an ink footer. Only the nine palette colours are used:
     paper #FFFFFF   ink #16242F   slate #1F3240   purple #BA94E9
     pink  #EB8FD8   sage #B9D4B4  coral #F46659   amber  #FFBC3E
     green #1CC549  (primary, the "live" signal colour)
   Tints are a palette colour blended into the slate canvas.
   ========================================================================= */
:root {
  --paper: #FFFFFF; --ink: #16242F; --slate: #1F3240;
  --purple: #BA94E9; --pink: #EB8FD8; --sage: #B9D4B4;
  --coral: #F46659; --amber: #FFBC3E; --green: #1CC549;
  --mute: #B7BDC2;                       /* white softened toward slate (IoTmute) */
  --lift: #24394a;                       /* slate lifted a touch, for hovers */
  --line: rgba(255,255,255,0.20);
  --green-16: rgba(28,197,73,0.16);  --green-30: rgba(28,197,73,0.30);
  --amber-16: rgba(255,188,62,0.16); --coral-16: rgba(244,102,89,0.16);
  --purple-16: rgba(186,148,233,0.16); --sage-16: rgba(185,212,180,0.16);
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--slate); color: var(--paper); font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
b, strong { font-weight: 800; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); background: var(--ink); color: var(--amber); padding: 1px 5px;
  border-radius: 4px; font-size: .92em; }

/* ---- top bar: ink, signal mark, two-line brand ---- */
.top { background: var(--ink); position: sticky; top: 0; z-index: 10; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1em;
  flex-wrap: wrap; padding: .55em 1.1em; }
.brand { display: flex; align-items: center; gap: .65em; color: var(--paper); }
.brand:hover { text-decoration: none; }
.signal { width: 1.9em; height: 1.9em; flex: 0 0 auto; }
.signal .a1 { animation: breathe 2.6s var(--ease) infinite; }
.signal .a2 { animation: breathe 2.6s var(--ease) .22s infinite; }
.signal .a3 { animation: breathe 2.6s var(--ease) .44s infinite; }
.brand .unit { font-weight: 800; font-size: 15px; line-height: 1.15; }
.brand .wk { font-size: 12.5px; color: var(--mute); }
nav { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
nav a { color: var(--mute); font-weight: 700; font-size: 14px; padding: 3px 12px;
  border: 2px solid var(--line); border-radius: 999px; }
nav a:hover { color: var(--paper); border-color: var(--amber); text-decoration: none; }
nav a.on { background: var(--green); border-color: var(--green); color: var(--ink); }
.who { color: var(--mute); font-size: 13px; margin-right: .4em; }
.who b { color: var(--green); }
.trace { display: flex; height: 2px; }
.trace i:nth-child(1) { flex: 1 1 auto; background: var(--green); }
.trace i:nth-child(2) { width: 1.4em; background: var(--amber); }
.trace i:nth-child(3) { width: .9em; background: var(--coral); }

/* ---- page ---- */
main { width: 100%; max-width: 920px; margin: 0 auto; padding: 1.1em 16px 3em; flex: 1 0 auto; }
main > * { animation: fadeUp 300ms var(--ease) both; }
h1 { font-size: 1.6em; font-weight: 800; margin: .1em 0 .4em; line-height: 1.2; }
h2 { font-size: 1.15em; font-weight: 800; margin: .2em 0 .4em; color: var(--paper); }
.muted { color: var(--mute); font-size: 14px; }

/* task box: 2px rounded ink card */
.card { background: var(--ink); border: 2px solid var(--line); border-radius: 12px;
  padding: 1em 1.2em; margin: 0 0 1em; }
.card.live { border-color: var(--green); }

/* section head: green numbered circle, title, trace rule underneath */
.sec { margin: 1.6em 0 .5em; }
.sec-head { display: flex; align-items: center; gap: .6em; }
.num { width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--green); color: var(--ink);
  font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; }
.num.amber { background: var(--amber); } .num.coral { background: var(--coral); }
.num.purple { background: var(--purple); } .num.sage { background: var(--sage); } .num.pink { background: var(--pink); }
.sec-head h2 { margin: 0; font-size: 1.3em; }
.sec .trace { margin: .5em 0 .7em; }
.links { margin: 0 0 .4em; display: flex; gap: .4em; flex-wrap: wrap; }

/* challenge rows inside a section */
.ch { background: var(--ink); border: 2px solid var(--line); border-radius: 12px; padding: .75em 1em;
  margin: .55em 0; }
.ch.done { border-color: var(--green); }
.ch-head { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.ch-id { background: var(--green); color: var(--ink); border-radius: 999px; font-weight: 800;
  font-size: 12.5px; padding: .1em .65em; }
.ch-title { font-weight: 800; }
.ch .prompt { color: var(--mute); font-size: 14px; margin-top: .4em; white-space: pre-wrap; }

/* pill chips */
.chip { font-size: 12px; font-weight: 800; padding: .12em .62em; border-radius: 999px;
  border: 2px solid var(--line); color: var(--mute); white-space: nowrap; }
.chip.pts { border-color: var(--purple); color: var(--purple); }
.chip.tries { border-color: var(--amber); color: var(--amber); }
.chip.got { border-color: var(--green); color: var(--green); white-space: normal; word-break: break-all; }
.tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .12em .6em; border-radius: 5px; background: var(--green); color: var(--ink); }
.mini { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  border: 2px solid var(--line); color: var(--mute); background: var(--ink); }
.mini:hover { border-color: var(--amber); color: var(--paper); text-decoration: none; }

/* blocks: coloured header band over a tinted body */
.blk { border-radius: 9px; overflow: hidden; margin: .7em 0; }
.blk > h3 { margin: 0; padding: .3em .85em; font-weight: 800; font-size: .95em; color: var(--ink); background: var(--green); }
.blk > .body { padding: .55em .9em; background: var(--green-16); }
.blk.amber > h3 { background: var(--amber); } .blk.amber > .body { background: var(--amber-16); }
.blk.coral > h3 { background: var(--coral); } .blk.coral > .body { background: var(--coral-16); }
.blk.purple > h3 { background: var(--purple); } .blk.purple > .body { background: var(--purple-16); }
.blk.sage > h3 { background: var(--sage); } .blk.sage > .body { background: var(--sage-16); }
.blk p { margin: .2em 0; }

/* feedback lines (as 10A .feedback): green ok, coral error, amber warning */
p.ok, p.err, p.warn { border-radius: 8px; padding: .55em .9em; margin: .7em 0; color: var(--paper); }
p.ok { background: var(--green-16); border-left: 4px solid var(--green); }
p.err { background: var(--coral-16); border-left: 4px solid var(--coral); }
p.warn { background: var(--amber-16); border-left: 4px solid var(--amber); font-weight: 700; }
p.ok:empty, p.err:empty, p.warn:empty { display: none; }
span.ok, td.ok { color: var(--green); } span.err { color: var(--coral); }
.q { font-size: 1.15em; font-weight: 800; color: var(--amber); }

/* forms and buttons */
label { display: block; margin: .7em 0 .25em; font-size: 14px; color: var(--mute); font-weight: 700; }
input, textarea, select { width: 100%; padding: .55em .75em; border-radius: 8px; border: 2px solid var(--line);
  background: var(--slate); color: var(--paper); font: 15px var(--sans); }
input:focus, textarea:focus { outline: none; border-color: var(--green); }
textarea.code { font-family: var(--mono); font-size: 14px; min-height: 140px; }
.btn { display: inline-block; margin-top: .8em; padding: .5em 1.1em; border: 2px solid var(--green);
  border-radius: 8px; background: var(--green); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; }
.btn:hover { background: #16a83e; border-color: #16a83e; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .32; }
.btn.ghost { background: var(--ink); border-color: var(--line); color: var(--mute); }
.btn.ghost:hover { border-color: var(--amber); color: var(--paper); }

/* the data spine (architecture page): one pill per stage, palette order */
.spine { display: flex; gap: 1.5em; list-style: none; padding: 0; flex-wrap: wrap; align-items: center; }
.spine li { position: relative; color: var(--ink); font-weight: 800; font-size: 14px; border-radius: 6px; padding: .35em .9em; }
.spine li:nth-child(1) { background: var(--purple); } .spine li:nth-child(2) { background: var(--pink); }
.spine li:nth-child(3) { background: var(--sage); } .spine li:nth-child(4) { background: var(--amber); }
.spine li:nth-child(5) { background: var(--green); }
.spine li + li::before { content: "\2192"; color: var(--paper); font-weight: 800; position: absolute; left: -1.15em; top: 50%; transform: translateY(-52%); }

/* output, tables, terminal */
.out { background: var(--slate); border: 2px solid var(--line); border-radius: 10px; padding: .8em 1em;
  overflow: auto; white-space: pre-wrap; font: 13.5px/1.45 var(--mono); color: var(--paper); margin: .6em 0; }
.res { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: .8em; font-size: 14px;
  background: var(--ink); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; }
.res th, .res td { padding: .4em .7em; text-align: left; border-top: 1px solid var(--line); }
.res th { background: var(--amber); color: var(--ink); border-top: 0; font-weight: 800; }
.term { background: var(--ink); border: 2px solid var(--line); border-radius: 12px; min-height: 360px;
  max-height: 70vh; overflow: auto; padding: .7em .9em; font: 13.5px/1.4 var(--mono); white-space: pre-wrap;
  color: var(--paper); }
.term .in { color: var(--green); }
.term input { border: 0; padding: 0; border-radius: 0; background: transparent; font: inherit; color: var(--paper); }

/* footer: ink bar with the status LED */
footer { background: var(--ink); color: var(--mute); font-size: 12.5px; border-top: 1px solid var(--line); }
footer .f-in { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; padding: .7em 1.1em; }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  margin-right: .5em; vertical-align: 1px; }

@keyframes breathe { 0%, 70%, 100% { opacity: .25; } 20% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .signal path, main > * { animation: none !important; } }
@media (max-width: 600px) { main { padding: .9em 12px 2.5em; } .res { display: block; overflow-x: auto; } }
main ul li::marker, main ol li::marker { color: var(--green); }

/* ---- answer boxes and revealed flags (the Week 6 flag console look) ---- */
.ch .act { margin-top: .55em; }
form.ans { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin: 0; }
form.ans input { flex: 1; min-width: 12em; width: auto; font-family: var(--mono); }
form.ans .btn { margin-top: 0; }
p.note { font-size: 14px; margin: .35em 0 0; min-height: 0; }
p.note:empty { display: none; }
p.note.bad { color: var(--coral); }
p.where { color: var(--mute); font-size: 14px; margin: .2em 0; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.shake { animation: shake .32s; border-color: var(--coral) !important; }
.flag { margin-top: .5em; background: var(--slate); border: 1px dashed var(--green); border-radius: 8px;
  padding: .6em .8em; display: flex; align-items: center; gap: .7em; flex-wrap: wrap; animation: pop .3s; }
.flag .label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-weight: 800; }
.flag .str { flex: 1; min-width: 12em; font-size: 15px; color: var(--paper); background: transparent;
  padding: 0; word-break: break-all; user-select: all; }
.flag button.copy { cursor: pointer; font: 800 13px var(--sans); background: var(--green); color: var(--ink);
  border: 0; border-radius: 6px; padding: .35em .9em; }
.flag button.copy:hover { filter: brightness(1.1); }
.flag button.copy.ok { background: var(--sage); }
p.paste { font-size: 13px; color: var(--mute); margin: .3em 0 0; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }