/* RMC Lab — chalk and copper.
 * A workbench in a tower attic: a slate with a chalk circle, copper instruments, pinned paper notes.
 * Rule of thumb: slate is where the magic happens (chalk, glow); paper is where you read and record. */
:root {
  --slate: #101512; --slate2: #171e1a; --slate3: #212a25; --line: #33403a; --line2: #4a5b52;
  --chalk: #eee8d6; --chalk2: #b9b5a3; --chalk3: #7f8478;
  --copper: #c8763f; --copper-d: #7d4321; --brass: #e2b34c; --verdigris: #58b89b; --wax: #c4483c; --violet: #a68fd6; --lamp: #ffcf85;
  --paper: #efe4c8; --paper2: #e2d5b3; --ink: #2b2418; --ink2: #5b5039; --ink3: #8a7d5e;
  --good: #7ac96a; --warn: #e2b34c; --bad: #d95c4e;
  --hand: "Bradley Hand", "Chalkboard SE", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive;
  --body: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--slate); }
body { margin: 0; min-height: 100vh; color: var(--chalk); font: 14px/1.5 var(--body);
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(255, 190, 110, .14), transparent 62%),
    radial-gradient(700px 500px at 100% 100%, rgba(88, 184, 155, .07), transparent 60%),
    var(--slate); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .07; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
button, input, select { font: inherit; color: inherit; }
h2 { margin: 0 0 10px; font: 700 18px/1.2 var(--hand); letter-spacing: .02em; color: var(--chalk); }
.mono { font-family: var(--mono); } .dim { color: var(--chalk3); }
.hint { color: var(--chalk3); margin: -4px 0 14px; font-size: 13px; }

/* ---- top bar: brand, tabs, copper instruments ---- */
.top { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand tabs instruments"; gap: 10px 22px; align-items: center; padding: 8px 22px; background: linear-gradient(180deg, #1b231f, #121815); border-bottom: 2px solid var(--copper-d); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.brand { grid-area: brand; display: flex; align-items: center; gap: 10px; color: var(--copper); } .brand svg { width: 28px; height: 28px; } .brand b { font: 700 20px var(--hand); color: var(--chalk); letter-spacing: .03em; }
.tabs { grid-area: tabs; min-width: 0; display: flex; gap: 2px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--chalk2); font: 700 15px var(--hand); }
.tabs button:hover { color: var(--chalk); } .tabs button.on { color: var(--lamp); border-bottom-color: var(--copper); }
.pip:not(:empty) { display: inline-block; background: var(--copper); color: #1b0f06; border-radius: 9px; padding: 0 6px; font: 700 11px var(--body); margin-left: 3px; }
.instruments { grid-area: instruments; display: flex; align-items: center; gap: 14px; }
.rank { width: 170px; } .rank-top { display: flex; justify-content: space-between; align-items: baseline; font: 700 13px var(--hand); color: var(--brass); } .rank-top .mono { font-size: 11px; color: var(--chalk3); }
.rail { height: 9px; margin-top: 3px; border: 2px solid var(--copper-d); border-radius: 6px; background: #0a0e0c; overflow: hidden; }
.rail i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--brass) 0 8px, #b98d2e 8px 10px); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.vial-wrap { display: flex; align-items: center; gap: 6px; } .vial-wrap span { font-size: 12px; min-width: 28px; }
.vial-wrap svg { width: 22px; height: 54px; display: block; }
.sound { background: none; border: 1.5px solid var(--line2); border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: 12px; color: var(--chalk3); } .sound[aria-pressed=true] { color: var(--lamp); border-color: var(--copper); }
@media (max-width: 1050px) { .top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand instruments" "tabs tabs"; } }
/* phones: the bar becomes two slim rows that scroll away, and the tab strip is the one thing that stays pinned, scrolling sideways if it must */
@media (max-width: 700px) {
  .top { display: contents; }
  .brand { padding: 8px 14px 0; background: #161e1a; } .brand b { font-size: 18px; }
  .instruments { flex-wrap: wrap; gap: 6px 10px; padding: 4px 14px 8px; background: #161e1a; justify-content: space-between; }
  .rank { width: auto; flex: 1 1 96px; min-width: 90px; } .vial-wrap span { min-width: 0; } .vial-wrap svg { height: 44px; width: 18px; }
  .sound { padding: 3px 9px; font-size: 11.5px; }
  .tabs { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 6px; background: #121815; border-bottom: 2px solid var(--copper-d); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; white-space: nowrap; padding: 11px 13px; font-size: 15px; }
}

main { position: relative; z-index: 1; padding: 18px 22px 70px; max-width: 1640px; margin: 0 auto; }
.tab { display: none; } .tab.on { display: block; }
.panel { background: var(--slate2); border: 1.5px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }

/* ---- buttons ---- */
.chalkbtn { background: rgba(238, 232, 214, .05); border: 1.5px solid var(--line2); border-radius: 8px; padding: 6px 12px; cursor: pointer; color: var(--chalk); font: 700 13px var(--hand); transition: background .15s, border-color .15s, transform .08s; }
.chalkbtn:hover:not(:disabled) { border-color: var(--copper); background: rgba(200, 118, 63, .12); } .chalkbtn:active { transform: translateY(1px); } .chalkbtn:disabled { opacity: .4; cursor: not-allowed; }
.chalkbtn.brass { background: var(--brass); color: #2b1d05; border-color: #a17b25; } .chalkbtn.brass:hover:not(:disabled) { background: #f0c565; }
.chalkbtn.danger { border-color: #7a3630; color: #f0a79f; }
.castbtn { padding: 12px 40px; font: 700 26px var(--hand); letter-spacing: .06em; color: #24120a; background: linear-gradient(180deg, #e08b4f, #b8672f); border: 2px solid #f0b487; border-bottom: 5px solid var(--copper-d); border-radius: 12px; cursor: pointer; box-shadow: 0 0 26px rgba(224, 139, 79, .28); transition: transform .08s, filter .15s; }
.castbtn:hover:not(:disabled) { filter: brightness(1.12); } .castbtn:active:not(:disabled) { transform: translateY(3px); border-bottom-width: 2px; } .castbtn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- bench layout ---- */
.bench { display: grid; grid-template-columns: 168px minmax(440px, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .bench { grid-template-columns: 150px 1fr; } .side { grid-column: 1 / -1; } }
@media (max-width: 800px) { .bench { grid-template-columns: 1fr; } .stage { order: 1; } .rack { order: 2; } .side { order: 3; } }

/* ---- rack ---- */
.rack { background: linear-gradient(180deg, var(--slate3), var(--slate2)); border: 2px solid var(--copper-d); border-radius: 10px; padding: 12px; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
@media (max-width: 800px) { .rack { position: static; max-height: none; } }
.rgroup { margin-bottom: 10px; } .rgroup h3 { margin: 0 0 4px; font: 700 12px var(--hand); color: var(--chalk3); letter-spacing: .06em; text-transform: lowercase; }
.runes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (max-width: 800px) { .runes { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); } }
.rune { position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 2px 5px; background: rgba(238, 232, 214, .04); border: 1.5px solid var(--line); border-radius: 9px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, transform .12s; }
.rune .g { font-size: 26px; line-height: 1.05; } .rune small { font: 700 11px var(--hand); color: var(--chalk2); }
.rune:hover { border-color: var(--rc, var(--copper)); transform: translateY(-2px); }
.rune.sel { border-color: var(--brass); background: rgba(226, 179, 76, .12); box-shadow: 0 0 0 1.5px var(--brass) inset; }
.rune .fresh { position: absolute; top: 3px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); }
.rune.jar { border-style: dashed; border-color: var(--violet); }
.rune-info { margin-top: 8px; padding: 8px 9px; border: 1px dashed var(--line2); border-radius: 8px; font-size: 12px; color: var(--chalk3); min-height: 60px; } .rune-info b { color: var(--chalk); }

/* ---- stage: the chalk slab ---- */
.stage { min-width: 0; }
.slab { position: relative; border: 3px solid #5b3a1f; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #1e2823 0%, #131a16 62%, #0d120f 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .4); padding: 10px 10px 4px; }
.slab::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(60% 40% at 30% 20%, rgba(255, 220, 160, .06), transparent 70%); }
.tip { font: 700 14px var(--hand); color: var(--chalk2); padding: 2px 6px 6px; } .tip b { color: var(--lamp); }
.circle-wrap { display: grid; place-items: center; position: relative; z-index: 1; }
#circle { width: 100%; max-width: 560px; height: auto; touch-action: manipulation; }
#motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 226, 170, .55); animation: mote linear infinite; pointer-events: none; }
@keyframes mote { from { transform: translateY(0) translateX(0); opacity: 0; } 15% { opacity: .8; } to { transform: translateY(-160px) translateX(24px); opacity: 0; } }

.ring-guide { fill: none; stroke: rgba(238, 232, 214, .16); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.chan { stroke: rgba(238, 232, 214, .22); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.chan.open { stroke: var(--chalk); stroke-width: 4; stroke-dasharray: none; opacity: .92; filter: drop-shadow(0 0 4px rgba(238, 232, 214, .35)); stroke-dashoffset: 0; }
.chan.drawn { stroke-dasharray: 400; animation: chalkdraw .5s ease-out; } @keyframes chalkdraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.chan.dead { stroke: rgba(238, 232, 214, .25); }
.chan-hit { stroke: transparent; stroke-width: 22; cursor: pointer; }
.qm { font: 700 20px var(--hand); fill: var(--lamp); text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: .75; animation: qm 2.6s ease-in-out infinite; } @keyframes qm { 50% { opacity: .3; } }
.slot { cursor: pointer; }
.slot .bg { fill: #0d1310; stroke: rgba(238, 232, 214, .55); stroke-width: 3; }
.slot.empty .bg { stroke: rgba(238, 232, 214, .3); stroke-dasharray: 3 7; stroke-linecap: round; }
.slot:hover .bg { stroke: var(--lamp); }
.slot.locked { cursor: not-allowed; } .slot.locked .bg { stroke: rgba(238, 232, 214, .1); }
.slot .glyph { font-size: 26px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.slot .plus { fill: rgba(238, 232, 214, .28); font: 700 20px var(--hand); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.slot .mana { transition: r .25s, fill .25s, opacity .25s; pointer-events: none; }
.slot .stress { fill: none; stroke-width: 5; pointer-events: none; transition: stroke .25s; }
.slot .qty { font: 700 12px var(--hand); fill: var(--chalk2); text-anchor: middle; pointer-events: none; }
.slot.rupt .bg { stroke: var(--bad); stroke-dasharray: 3 4; } .slot.rupt .glyph { opacity: .25; }
.slot.closed .bg { stroke-width: 4; }
.slot.selected .bg { stroke: var(--brass); stroke-width: 4; }
.slot.cause .bg { stroke: #fff; stroke-width: 5; filter: drop-shadow(0 0 10px #fff); animation: pulse .9s ease-in-out infinite alternate; } @keyframes pulse { from { stroke: #fff; } to { stroke: var(--lamp); } }
.slot.v-weak .bg { stroke: var(--bad); stroke-width: 5; } .slot.v-load .bg { stroke: var(--good); stroke-width: 5; } .slot.v-gain .bg { stroke: var(--brass); stroke-width: 5; } .slot.v-guard .bg { stroke: var(--verdigris); stroke-width: 5; } .slot.v-hold .bg { stroke: var(--violet); stroke-width: 5; }
.dot { fill: #fff; filter: drop-shadow(0 0 5px var(--verdigris)); } .dot.back { fill: #ff9ad0; filter: drop-shadow(0 0 4px #ff9ad0); }
.empty-note { font: 700 22px var(--hand); fill: rgba(238, 232, 214, .32); text-anchor: middle; pointer-events: none; }

.inspector { margin: 12px 0 8px; padding: 10px 14px; background: var(--paper); color: var(--ink); border-radius: 4px 4px 6px 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transform: rotate(-.4deg); display: grid; gap: 6px; min-height: 46px; position: relative; }
.inspector::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9847a, #8f2a20); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.inspector .dim { color: var(--ink3); }
.ins-h { display: flex; gap: 10px; align-items: center; } .ins-h .g { font-size: 22px; } .ins-h b { font: 700 17px var(--hand); }
.ins-q { display: grid; grid-template-columns: 52px 1fr auto auto auto; gap: 8px; align-items: center; } .ins-q label { font: 700 13px var(--hand); color: var(--ink2); }
.ins-q input[type=range] { width: 100%; accent-color: var(--copper); }
.dial { width: 34px; height: 34px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0 10px; }
.cast-row { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 2px dashed var(--line); }
.pickers { display: grid; gap: 6px; } .picker { display: flex; align-items: center; gap: 8px; } .picker label { width: 76px; font: 700 12px var(--hand); color: var(--chalk3); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { background: rgba(238, 232, 214, .05); border: 1.5px solid var(--line2); border-radius: 7px; padding: 3px 10px; cursor: pointer; font: 700 12px var(--hand); color: var(--chalk2); }
.seg button.on { background: var(--copper); border-color: #f0b487; color: #1b0f06; } .seg button.lock { opacity: .35; }
.cast-btns { display: flex; gap: 8px; align-items: center; }

/* ---- film strip: the 14 ticks ---- */
.film { margin-top: 6px; background: #0d1310; border: 2px solid #2a3630; border-radius: 10px; padding: 10px 12px; }
.film-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .film-h b { font: 700 16px var(--hand); } .film-h .dim { font-size: 12px; flex: 1; }
.frames { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.frame { position: relative; height: 62px; border: 1.5px solid #2f3c35; border-radius: 4px; background: #131b17; cursor: pointer; padding: 0; overflow: hidden; color: var(--chalk3); text-align: center; }
.frame::before, .frame::after { content: ""; position: absolute; left: 3px; right: 3px; height: 3px; background: repeating-linear-gradient(90deg, #2c3832 0 4px, transparent 4px 8px); }
.frame::before { top: 2px; } .frame::after { bottom: 2px; }
.frame .n { position: absolute; top: 8px; left: 0; right: 0; font: 700 11px var(--mono); }
.frame .lvl { position: absolute; left: 4px; right: 4px; bottom: 8px; background: var(--fc, #33413a); border-radius: 2px; height: 4px; transition: height .3s; }
.frame.lit { border-color: var(--fc); color: var(--chalk); } .frame.lit::before, .frame.lit::after { background: repeating-linear-gradient(90deg, var(--fc) 0 4px, transparent 4px 8px); opacity: .6; }
.frame.on { outline: 2px solid var(--lamp); outline-offset: 1px; transform: translateY(-3px); }
.frame.s-1 { --fc: #46574d; } .frame.s0 { --fc: #4c6a5e; } .frame.s1 { --fc: var(--verdigris); } .frame.s2 { --fc: #89d1ff; } .frame.s3 { --fc: var(--warn); } .frame.s4 { --fc: #f08a48; } .frame.s5 { --fc: var(--bad); }
.film-text { margin-top: 8px; min-height: 44px; font-size: 14px; color: var(--chalk2); } .film-text b { display: block; font: 700 16px var(--hand); color: var(--lamp); }
.cast-log { margin-top: 6px; font-size: 12px; } .cast-log summary { cursor: pointer; color: var(--chalk3); }
.timeline { margin-top: 6px; max-height: 260px; overflow: auto; display: grid; gap: 4px; }
.trow { display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; padding: 5px 8px; background: #111813; border-left: 3px solid #33403a; border-radius: 3px; cursor: pointer; font-size: 12px; } .trow .t { grid-row: 1 / span 2; font: 11px var(--mono); color: var(--chalk3); } .trow .tx { color: var(--chalk2); grid-column: 2; }
.trow.extra { border-color: var(--bad); cursor: default; }

/* ---- side: window, specimen cards, stamp ---- */
.side { display: grid; gap: 14px; min-width: 0; }
.window { border: 3px solid var(--copper-d); border-radius: 12px; background: #0b1218; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.win-h { font: 700 13px var(--hand); padding: 4px 12px; background: linear-gradient(180deg, #3a2a1c, #2a1e14); color: var(--brass); }
.arena { background: linear-gradient(180deg, #16243a 0%, #1c2f47 55%, #2a2a26 55%); } .arena svg { display: block; width: 100%; height: auto; }
.arena .ground { stroke: #5c5a4a; stroke-width: 2; } .arena text { font: 10px var(--mono); fill: #9aa39a; }
.shake { animation: shake .3s linear; } @keyframes shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 2px); } }
.flashred { animation: flashred .5s ease-out; } @keyframes flashred { 0% { box-shadow: inset 0 0 90px rgba(217, 92, 78, .8); } 100% { box-shadow: inset 0 0 0 transparent; } }
.float { font: 700 15px var(--hand) !important; animation: floatup 1.1s ease-out forwards; paint-order: stroke; stroke: #000; stroke-width: 3px; } @keyframes floatup { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px); opacity: 0; } }

.note { position: relative; background: var(--paper); color: var(--ink); border-radius: 3px 3px 6px 6px; padding: 14px 16px 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.note::before { content: ""; position: absolute; top: -7px; left: 22px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9847a, #8f2a20); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.note small.k { display: block; font: 700 11px var(--hand); color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; }
.note .big { font: 700 22px/1.15 var(--hand); margin: 4px 0 2px; } .note p { margin: 3px 0 6px; font-size: 13px; color: var(--ink2); }
.note.tilt { transform: rotate(-.6deg); } .note.tilt2 { transform: rotate(.5deg); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-block; background: rgba(43, 36, 24, .08); border: 1px solid rgba(43, 36, 24, .25); border-radius: 999px; padding: 1px 9px; font-size: 12px; cursor: pointer; color: var(--ink); }
.chip.new { background: #e3d6ff; border-color: #8a6fc4; } .chip.got { background: #d3ecc9; border-color: #5b9a4b; } .chip.unk { border-style: dashed; color: var(--ink3); cursor: default; }
.stamp-wrap { display: flex; justify-content: flex-end; }
.stamp { display: inline-block; font: 700 26px var(--hand); letter-spacing: .12em; text-transform: uppercase; padding: 2px 14px; border: 4px double currentColor; border-radius: 6px; transform: rotate(-6deg); opacity: .92; animation: stampin .45s cubic-bezier(.2, 1.6, .4, 1) both; mix-blend-mode: multiply; }
@keyframes stampin { from { transform: rotate(-6deg) scale(2); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: .92; } }
.o-success { color: #2c7a3c; } .o-misfire { color: #a9741a; } .o-fizzle { color: #476693; } .o-dud { color: #6a6a5a; } .o-backfire { color: #b5502a; } .o-catastrophe { color: #a3232f; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plate { background: linear-gradient(180deg, #34281c, #241a12); border: 1.5px solid var(--copper-d); border-radius: 6px; padding: 5px 8px; } .plate small { display: block; color: var(--copper); font: 700 11px var(--hand); } .plate b { font: 700 16px var(--mono); color: var(--chalk); }
.narr { color: var(--chalk2); border-left: 3px solid var(--copper); padding-left: 10px; margin: 2px 0; } .repro { font-size: 11px; word-break: break-all; }
.scratch { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .scratch li { font-size: 13px; color: var(--chalk2); padding-left: 16px; position: relative; } .scratch li::before { content: "✎"; position: absolute; left: 0; color: var(--copper); }
.tag { position: relative; margin-top: 4px; background: #f3e9d0; color: var(--ink); border-radius: 4px; padding: 10px 12px 10px 18px; border-left: 6px solid var(--violet); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.tag.known { border-left-color: var(--good); } .tag .dh { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tag .dh b { font: 700 17px var(--hand); } .tag p { margin: 4px 0; font-size: 13px; color: var(--ink2); }
.name-row { display: flex; gap: 8px; margin-top: 6px; } .name-row input, .name-row select { flex: 1; background: #fffaf0; border: 1.5px solid var(--ink3); border-radius: 6px; padding: 6px 9px; color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 5px; font: 700 11px var(--hand); letter-spacing: .05em; text-transform: uppercase; background: rgba(43, 36, 24, .1); color: var(--ink2); }
.risk-stable { background: #cfe8c6; color: #2c5b25; } .risk-volatile { background: #f3dfb0; color: #7a5410; } .risk-dangerous { background: #f0c3bc; color: #802a20; }

.invest { background: #0f1b18; border: 2px solid var(--verdigris); border-radius: 10px; padding: 12px 14px; }
.invest h3 { margin: 12px 0 5px; font: 700 15px var(--hand); color: var(--verdigris); } .invest h3.sub { color: var(--chalk3); }
.iline { padding: 3px 8px; border-left: 3px solid var(--line2); margin: 3px 0; font-size: 13px; cursor: pointer; border-radius: 3px; color: var(--chalk2); } .iline:hover { background: rgba(238, 232, 214, .06); }
.iline.role .arr { color: var(--copper); } .iline.role b { color: var(--chalk); } .iline.chain { border-color: var(--brass); color: var(--chalk); }
.iline.rel.opposition { border-color: var(--bad); } .iline.rel.feedback { border-color: #ff9ad0; } .iline.rel.amplification { border-color: var(--warn); } .iline.rel.synergy, .iline.rel.grounding { border-color: var(--good); }
.invest .chip { background: rgba(238, 232, 214, .07); color: var(--chalk); border-color: var(--line2); }
.brk { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; } .brk td, .brk th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; } .brk th { color: var(--chalk3); font: 700 12px var(--hand); } .brk tr.diff td { color: var(--lamp); font-weight: 700; }

.bests { background: var(--slate2); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .bests h3 { margin: 0 0 6px; font: 700 15px var(--hand); }
.best { display: grid; grid-template-columns: 92px 1fr 64px; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; color: var(--chalk2); }
.best .track { position: relative; height: 8px; background: #0a0e0c; border-radius: 5px; } .best .track i { display: block; height: 100%; border-radius: 5px; background: var(--copper); } .best .track u { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--brass); }
.best.new b { color: var(--lamp); } .best b { font: 12px var(--mono); text-align: right; }
.sockets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.socket { border: 2px dashed var(--line2); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--chalk3); } .socket b { display: block; font: 700 14px var(--hand); color: var(--chalk2); }
.socket.on { border: 2px solid var(--copper); border-style: solid; background: linear-gradient(180deg, #2b2016, #1c150f); color: var(--chalk2); } .socket.on b { color: var(--brass); }
.socket .rd { display: block; margin-top: 4px; color: var(--chalk); font: 12px var(--mono); }
.sockets h3 { grid-column: 1 / -1; margin: 6px 0 0; font: 700 15px var(--hand); }

/* ---- toasts ---- */
#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 60; width: min(340px, calc(100vw - 36px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--paper); color: var(--ink); border-left: 6px solid var(--copper); border-radius: 4px; padding: 9px 13px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); animation: toastin .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast b { display: block; font: 700 14px var(--hand); color: var(--copper-d); } .toast span { font-size: 13px; }
.toast.level { border-left-color: var(--violet); background: #eee6ff; } .toast.level b { color: #5b3fa8; font-size: 16px; } .toast.bad { border-left-color: var(--bad); } .toast.bad b { color: #a3232f; }
.toast.out { animation: toastout .35s ease-in forwards; } @keyframes toastin { from { transform: translateX(120%) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes toastout { to { transform: translateX(120%); opacity: 0; } }

/* ---- notebook: an open book ---- */
.book { display: grid; grid-template-columns: 300px 1fr; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); border: 3px solid #5b3a1f; min-height: 520px; }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } }
.book-left { background: #d9cba6; color: var(--ink); padding: 18px 16px; border-right: 6px double #9c8a5c; } .book-left h2 { color: var(--ink); } .book-left .hint { color: var(--ink3); }
.book-right { background: var(--paper); color: var(--ink); padding: 22px 26px; background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(90, 70, 40, .12) 31px 32px); }
.disc-list { display: grid; gap: 6px; align-content: start; }
.dl { text-align: left; background: rgba(255, 250, 235, .55); border: 1.5px solid #b3a273; border-radius: 6px; padding: 7px 10px; cursor: pointer; color: var(--ink); } .dl.on { background: #fff8e2; border-color: var(--copper); box-shadow: 0 2px 0 var(--copper); } .dl b { font: 700 16px var(--hand); } .dl small { display: block; color: var(--ink3); }
.nb-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .nb-h h3 { margin: 0; font: 700 32px var(--hand); }
.nb-sec { margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--ink3); } .nb-sec h4 { margin: 0 0 5px; font: 700 14px var(--hand); color: var(--copper-d); letter-spacing: .04em; text-transform: uppercase; }
.sketch { background: #131a16; border-radius: 8px; padding: 6px; display: inline-block; width: 200px; box-shadow: inset 0 0 18px rgba(0, 0, 0, .7); } .sketch svg { width: 100%; display: block; }
.meta { font-size: 13px; color: var(--ink2); margin: 2px 0; }
.pbar { display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; max-width: 340px; } .pbar .track { height: 8px; background: rgba(43, 36, 24, .15); border-radius: 6px; overflow: hidden; } .pbar i { display: block; height: 100%; }
.book .actions .chalkbtn { color: var(--ink); border-color: var(--ink3); background: rgba(255, 250, 235, .6); } .book .actions .chalkbtn:hover { border-color: var(--copper); }
.book .chip.unk { color: var(--ink3); }
.empty { color: var(--chalk3); font: italic 15px var(--hand); padding: 10px 0; } .book .empty { color: var(--ink3); }

/* ---- corkboard ---- */
.cork { border-radius: 12px; border: 6px solid #5b3a1f; padding: 18px 20px 24px; min-height: 480px; overflow: auto;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .05), transparent 50%), #b98a58;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .2  0 0 0 0 .08  0 0 0 .5 0'/></filter><rect width='120' height='120' filter='url(%23c)'/></svg>"); box-shadow: inset 0 0 40px rgba(0, 0, 0, .35); }
.cork-h { color: #2b1c0c; } .cork-hint { color: #4a3319; font-size: 13px; margin: -6px 0 12px; }
.lineage svg { display: block; min-width: 100%; } .note-t { font: 700 15px var(--hand); fill: #2b2418; } .note-s { font: 11px var(--body); fill: #6b5d3f; }
.string { stroke: #b3261e; stroke-width: 2.2; fill: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35)); }

/* ---- ledger ---- */
.ledger { background: var(--paper); color: var(--ink); border-radius: 10px; padding: 18px 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .ledger h2 { color: var(--ink); } .ledger .hint { color: var(--ink3); }
.jentry { border-bottom: 1px dashed var(--ink3); padding: 12px 0; display: grid; gap: 4px; } .jh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .jh b { font: 700 17px var(--hand); }
.jentry .f { font: 12px var(--mono); color: var(--ink2); } .jentry .t { font-size: 12px; color: var(--ink3); } .hl { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); }
.mini-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; max-width: 320px; } .mini-strip i { height: 10px; border-radius: 2px; background: #cdbf9a; } .mini-strip i.s0 { background: #9fb8a8; } .mini-strip i.s1 { background: #6fb59b; } .mini-strip i.s2 { background: #7fb5d6; } .mini-strip i.s3 { background: #d9a93d; } .mini-strip i.s4 { background: #e08a48; } .mini-strip i.s5 { background: #c4483c; }
.ledger .chalkbtn { color: var(--ink); border-color: var(--ink3); background: rgba(255, 250, 235, .6); } .ledger .chalkbtn:hover { border-color: var(--copper); }
.ledger .chip.new { background: #e3d6ff; } .ledger .badge { font-size: 12px; }
.cmp { margin-bottom: 14px; border: 2px solid var(--copper); border-radius: 6px; padding: 10px 14px; background: #f7edd0; } .cmp h3 { margin: 0 0 6px; font: 700 17px var(--hand); } .ledger .brk td, .ledger .brk th { border-color: rgba(43, 36, 24, .2); } .ledger .brk tr.diff td { color: #9a4a12; }

/* ---- codex & jobs ---- */
.codex { display: grid; gap: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.card { background: var(--slate3); border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 12px; } .card b { display: block; font: 700 15px var(--hand); } .card small { color: var(--chalk3); }
.card.locked { opacity: .55; border-style: dashed; } .card.locked b { filter: blur(3px); user-select: none; } .card.got { border-color: #3d6b52; }
.laws { display: grid; gap: 8px; } .law { display: grid; grid-template-columns: 26px 1fr; gap: 10px; background: var(--slate3); border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; } .law b { font: 700 15px var(--hand); } .law p { margin: 2px 0 0; color: var(--chalk3); font-size: 13px; } .law input { width: 18px; height: 18px; accent-color: var(--copper); margin-top: 3px; } .law.off { opacity: .5; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.contract { position: relative; background: var(--paper); color: var(--ink); border-radius: 3px 3px 6px 6px; padding: 14px 16px 12px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); } .contract:nth-child(odd) { transform: rotate(-.7deg); } .contract:nth-child(even) { transform: rotate(.6deg); }
.contract::before { content: ""; position: absolute; top: -7px; left: 20px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9847a, #8f2a20); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.contract h3 { margin: 0 0 4px; font: 700 18px var(--hand); } .contract p { margin: 0; color: var(--ink2); font-size: 13px; } .contract .xp { position: absolute; top: 10px; right: 12px; color: var(--copper-d); font: 700 13px var(--mono); }
.contract.done { opacity: .6; } .contract.done h3::after { content: " ✓"; color: #2c7a3c; } .contract.locked { opacity: .5; filter: grayscale(1); }
table { width: 100%; }

/* buttons that sit on paper need ink, not chalk */
.inspector .chalkbtn, .tag .chalkbtn, .note .chalkbtn { color: var(--ink); border-color: var(--ink3); background: rgba(255, 250, 235, .7); }
.inspector .chalkbtn:hover, .tag .chalkbtn:hover, .note .chalkbtn:hover { border-color: var(--copper); background: #fff3d2; }
.inspector .chalkbtn.danger { color: #8f2a20; border-color: #b3261e; }
.tag .chalkbtn.brass, .note .chalkbtn.brass { background: var(--brass); color: #2b1d05; border-color: #a17b25; }
.sound { white-space: nowrap; }

/* the rack may only stick to the viewport when it has a column of its own (wide layout) */
@media (max-width: 1180px) { .rack { position: static; max-height: none; } }

/* mid widths: chamber and instruments on the left, results on the right, instead of one very wide column */
@media (min-width: 801px) and (max-width: 1180px) {
  .side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .side > .window, .side > #investigation, .side > #bests, .side > #sockets { grid-column: 1; }
  .side > #result { grid-column: 2; grid-row: 1 / span 4; }
  .side > #sockets { grid-template-columns: 1fr; }
}

/* ---- academy ---- */
.academy { max-width: 1080px; margin: 0 auto; }
.hero { text-align: center; padding: 26px 10px 10px; } .hero h1 { margin: 0; font: 700 44px/1.1 var(--hand); color: var(--chalk); text-shadow: 0 0 22px rgba(255, 207, 133, .25); }
.hero p { max-width: 640px; margin: 12px auto 0; color: var(--chalk2); font-size: 16px; }
.lesson { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; margin: 30px 0; padding: 20px 22px; background: linear-gradient(180deg, var(--slate3), var(--slate2)); border: 2px solid var(--line); border-radius: 12px; }
@media (max-width: 640px) { .lesson { grid-template-columns: 1fr; } }
.lno { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 26px var(--hand); color: #24120a; background: radial-gradient(circle at 35% 30%, #f0b487, var(--copper)); box-shadow: 0 0 18px rgba(200, 118, 63, .35); }
.lbody h2 { margin: 2px 0 8px; font-size: 26px; } .lbody h3.l2 { margin: 22px 0 4px; font: 700 20px var(--hand); color: var(--lamp); }
.lp { margin: 6px 0; color: var(--chalk2); font-size: 15px; max-width: 760px; }
.exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.ex { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; background: rgba(0, 0, 0, .22); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; }
.ex .sketch { width: 96px; padding: 3px; } .ex-b b { font: 700 17px var(--hand); color: var(--chalk); } .ex-b p { margin: 3px 0 8px; font-size: 13px; color: var(--chalk2); }
.finale { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 36px 10px 20px; text-align: center; } .finale span { font: 700 34px/1.2 var(--hand); color: var(--lamp); text-shadow: 0 0 24px rgba(255, 207, 133, .3); }

/* ---- journal you write yourself ---- */
.book-left .dl { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; } .book-left .dl b, .book-left .dl small, .book-left .dl .mini-strip { grid-column: 2; } .book-left .dl input { grid-row: 1 / span 2; grid-column: 1; }
.book-left .dl:not(:has(input)) b, .book-left .dl:not(:has(input)) small, .book-left .dl:not(:has(input)) .mini-strip { grid-column: 1 / -1; }
.j-title { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--ink3); font: 700 30px var(--hand); color: var(--ink); padding: 2px 0 4px; outline: none; } .j-title:focus { border-bottom-color: var(--copper); }
.j-body { width: 100%; margin-top: 12px; background: transparent; border: 0; resize: vertical; font: 16px/32px var(--hand); color: var(--ink); outline: none; min-height: 260px; }
.attached { margin-top: 16px; padding: 12px 14px; background: rgba(255, 250, 235, .55); border: 1.5px dashed var(--ink3); border-radius: 8px; } .attached h4 { margin: 0 0 8px; font: 700 14px var(--hand); color: var(--copper-d); text-transform: uppercase; letter-spacing: .05em; }
.att-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; } @media (max-width: 640px) { .att-row { grid-template-columns: 1fr; } } .att-row .sketch { width: 150px; }
.book-right .chalkbtn { color: var(--ink); border-color: var(--ink3); background: rgba(255, 250, 235, .6); } .book-right .chalkbtn.danger { color: #8f2a20; border-color: #b3261e; } .book-right .chalkbtn:hover { border-color: var(--copper); }
.book-left .chalkbtn.brass { background: var(--brass); color: #2b1d05; }
.book-right .badge, .book-right .stamp { display: inline-block; }
.advanced summary { cursor: pointer; } .advanced summary b { font: 700 16px var(--hand); }

/* ---- leaderboard ---- */
.ranks { max-width: 1240px; margin: 0 auto; } .hero.small { padding: 14px 10px 6px; } .hero.small h1 { font-size: 34px; }
.ranks-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; } @media (max-width: 900px) { .ranks-grid { grid-template-columns: minmax(0, 1fr); } }
.ranks-grid > * { min-width: 0; } .ranks-grid table { display: block; overflow-x: auto; max-width: 100%; }
.rk-side .panel input { width: 100%; margin: 4px 0; background: #0d1310; border: 1.5px solid var(--line2); border-radius: 7px; padding: 7px 10px; color: var(--chalk); }
.lb-err { color: #ff9a8f; font-size: 13px; margin: 6px 0 0; min-height: 1em; }
.boardlist { display: grid; gap: 6px; } .bcard { text-align: left; background: var(--slate2); border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; color: var(--chalk); } .bcard:hover { border-color: var(--copper); } .bcard.on { border-color: var(--brass); background: #2b2416; }
.bcard b { font: 700 15px var(--hand); display: block; } .bcard small { color: var(--chalk3); }
.tablewrap { overflow-x: auto; } table.lb { border-collapse: collapse; width: 100%; font-size: 13px; } table.lb th, table.lb td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.lb th { color: var(--chalk3); font: 700 12px var(--hand); } table.lb th.sortable { cursor: pointer; } table.lb th.on, table.lb td.on { color: var(--lamp); } table.lb tr.mine td { background: rgba(226, 179, 76, .09); }
table.lb tr.circle-row td { background: rgba(0, 0, 0, .2); white-space: normal; } .code { background: #0a0e0c; border: 1px solid var(--line2); border-radius: 6px; padding: 8px 12px; color: var(--lamp); }
#lb-board .att-row, #lb-submit .att-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; } #lb-board .sketch, #lb-submit .sketch { width: 130px; }
#lb-board .meta, #lb-submit .meta { color: var(--chalk2); } #lb-submit .name-row { margin-top: 10px; } #lb-submit .name-row input, #lb-submit .name-row select { background: #0d1310; border-color: var(--line2); color: var(--chalk); }
#lb-submit .tag, #lb-board .tag { margin-top: 10px; } #lb-submit .panel, #lb-board .panel { margin-bottom: 16px; }

/* ---- field description ---- */
.note.field { margin-bottom: 14px; transform: rotate(-.3deg); background: #f2e8cd; }
.note.field .big { font: 700 24px/1.15 var(--hand); margin: 4px 0 6px; } .fdesc { font: 15px/1.6 Georgia, "Iowan Old Style", serif; color: var(--ink); margin: 4px 0 8px; }
.note.field .src { display: block; color: var(--ink3); font-size: 11px; font-style: italic; }
.shimmer { height: 12px; border-radius: 6px; margin: 8px 0; background: linear-gradient(90deg, rgba(43, 36, 24, .08), rgba(43, 36, 24, .22), rgba(43, 36, 24, .08)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } .shimmer.short { width: 60%; } @keyframes shimmer { to { background-position: -200% 0; } }
.att-row .fdesc { margin: 8px 0; }

/* spell sheet: plain and factual */
.fdesc { font: 14px/1.55 var(--body) !important; color: var(--ink); }
.note.field .big { font: 700 22px/1.15 var(--hand); }
dl.sheet { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0 10px; padding: 8px 10px; background: rgba(43, 36, 24, .07); border-radius: 6px; }
dl.sheet dt { font: 700 11px var(--hand); color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; align-self: center; }
dl.sheet dd { margin: 0; font: 13px var(--mono); color: var(--ink); }

/* discovery card */
.dcard{display:flex;flex-direction:column;gap:6px}
.dcard .dc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dcard .copy{padding:4px 10px;font-size:12px}
.dcard .dc-sum{font:15px/1.5 var(--body,inherit);margin:0 0 4px;font-weight:600}
.dcard .dc-sec{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(238,232,214,.22)}
.dcard .dc-list{margin:2px 0 0;padding-left:18px;font-size:14px;line-height:1.5}
.dcard .danger.d-safe b{color:#7fd6a0}.dcard .danger.d-unstable b{color:#ffd166}.dcard .danger.d-dangerous b{color:#ff9f5a}.dcard .danger.d-highly-dangerous b{color:#ff6b5b}.dcard .danger.d-unknown b{color:#b9b5a3}
.dcard .disc{border:1px solid #c9a6ff;border-radius:6px;padding:8px 10px;background:rgba(201,166,255,.08)}
.dcard .dc-new{letter-spacing:.08em;color:#c9a6ff;font-size:12px}
.dcard .dc-more summary{cursor:pointer;font-size:13px;opacity:.8}
.dc-cat{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 4px}
.chip{font-size:12px;letter-spacing:.04em;padding:2px 9px;border-radius:999px;border:1px solid currentColor;color:#8a7350;background:rgba(0,0,0,.04)}
.chip.cat-attack{color:#b5482f}.chip.cat-area-attack{color:#b9702a}.chip.cat-defence{color:#3f7fa0}.chip.cat-restoration{color:#3f8f63}.chip.cat-failed-reaction{color:#7a7566}
.lb-group{margin:14px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;font-weight:600}

.dcard .dc-btns{display:flex;gap:6px}
#shared-card{max-width:640px;margin:0 auto;padding:16px 0 40px}
.dcard .dc-btns{flex-wrap:wrap;justify-content:flex-end}
.dcard .elem{border:1px dashed #6f9e6a;border-radius:8px;padding:8px 10px;background:rgba(111,158,106,.10)}
.dcard .elem .name-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dcard .elem input{flex:1;min-width:140px}
.chip.cat-element-sample{color:#a98d5a}
.namerow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.namerow input{flex:1;min-width:120px}.linkbtn{background:none;border:0;color:var(--brass);font:700 12px var(--body);text-decoration:underline;cursor:pointer;padding:0 2px}
#mydata .actions{margin-top:8px}
.rk-side .panel input[type=checkbox],input[type=checkbox]{width:auto;flex:none;margin:0;background:none;padding:0}

/* phones: flex rows may wrap and shrink instead of pushing the page wider */
.name-row { flex-wrap: wrap; } .name-row input, .name-row select { min-width: 0; flex: 1 1 140px; max-width: 100%; }
@media (max-width: 700px) { main { padding-left: 12px; padding-right: 12px; } button, select, input { min-height: 36px; } }

.provider { display: block; width: 100%; margin: 6px 0; }
.rk-side .panel input[type=email] { width: 100%; margin: 4px 0; background: #0d1310; border: 1.5px solid var(--line2); border-radius: 7px; padding: 7px 10px; color: var(--chalk); }