/* ReadySetInk design system (READYSETINK_DESIGN_CONTRAST_REVISED.md), same tokens as the main app:
   periwinkle faceplate, carbon halftone command bar, white beveled plates, hard bevels, no blur. */
:root{
  --canvas:#6578a8;--canvas-soft:#dce7f5;--surface:#fff;--platinum:#e4e7eb;--carbon:#202638;--chrome:#334a88;
  --hairline:#68779b;--tx:#202638;--deep:#153a80;--link:#1f4da8;--on-dark:#e8f0fb;--on-dark-soft:#dce7f5;
  --amberc:#ffd400;--amber-press:#e6bf00;--signal:#e60012;--signal-deep:#b2000e;--bad:#b2000e;
  --bevel:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 var(--chrome);
  --bevel-in:inset 0 1px 0 var(--chrome),inset 0 -1px 0 rgba(255,255,255,.28);
  --sans:Arial,Helvetica,sans-serif;--display:"Arial Black","Arial Bold",Arial,Helvetica,sans-serif;
}
/* dark theme: a second palette, as on the main app */
@media(prefers-color-scheme:dark){:root{
  --canvas:#161b28;--canvas-soft:#0e121b;--surface:#212838;--platinum:#1a2030;--hairline:#3a4768;--tx:#e8f0fb;--deep:#b9cdf5;
  --link:#9ec0ff;--amberc:#ffd400;--bad:#ff8a93;
  --bevel:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.55);
  --bevel-in:inset 0 1px 0 rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.08)}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--tx);min-height:100vh;font:14px/1.5 var(--sans);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);background-attachment:fixed}
button,input,select,textarea{font-family:var(--sans);color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--link)}
:focus-visible{outline:3px solid #2f6fed;outline-offset:2px}

/* command layer */
.top{display:flex;align-items:center;gap:14px;padding:7px 12px;min-height:34px;background:var(--carbon);
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:4px 4px;border-bottom:2px solid var(--chrome)}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;min-width:0}
.brand b{font:900 16px var(--display);color:#153a80;background:#fff;border-radius:9999px;padding:3px 13px 4px;letter-spacing:-.02em;border:1px solid var(--chrome);white-space:nowrap}
.brand span{font-size:12px;color:var(--on-dark-soft);letter-spacing:.3px;white-space:nowrap}
.strip{display:flex;flex-wrap:wrap;padding:0 8px;background:var(--canvas-soft);border-bottom:1px solid var(--chrome);box-shadow:var(--bevel)}
.strip a{color:var(--tx);padding:6px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;border-right:1px solid rgba(51,74,136,.3);white-space:nowrap}
.strip a:hover{background:rgba(255,255,255,.4)}
.strip a.on{background:var(--carbon);color:var(--amberc)}
.strip .sp{flex:1}
main{max-width:1100px;margin:0 auto;padding:14px 12px 60px}
.pad{padding:14px;background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--bevel-in);border-radius:4px;color:var(--tx)}
.muted{color:var(--deep)}

/* hero plate: the box-art wordmark */
.hero{background:var(--chrome);border:1px solid var(--chrome);box-shadow:var(--bevel);border-radius:6px 6px 0 0;padding:14px 16px;margin-bottom:12px}
h1{font:900 26px/1.1 var(--display);color:#fff;text-shadow:2px 2px 0 var(--carbon),-1px -1px 0 var(--chrome),1px -1px 0 var(--chrome),-1px 1px 0 var(--chrome),1px 1px 0 var(--chrome)}
.lead{margin-top:6px;color:var(--on-dark-soft);max-width:70ch}
h2{font:900 13px var(--sans);text-transform:uppercase;letter-spacing:.5px;color:var(--deep);margin-bottom:10px}

/* plates */
.card{background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--bevel-in);border-radius:4px;padding:14px;color:var(--tx)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.paste{border-top:3px solid var(--amberc)}
.paste h2{font-size:18px;text-transform:none;letter-spacing:0;font-family:var(--display);color:var(--tx)}

/* home tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:14px;background:var(--surface);border:1px solid var(--chrome);box-shadow:var(--bevel);border-radius:4px;color:var(--tx);text-decoration:none;text-align:left;border-top:4px solid var(--carbon)}
.tile:hover,.tile:focus-visible{background:var(--canvas-soft);border-top-color:var(--amberc)}
.tile b{font:900 20px/1.1 var(--display);color:var(--deep)}
.tile span{color:var(--tx)}
.tile small{margin-top:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--deep)}
.tile.new{background:var(--platinum);border-style:dashed;border-top-style:dashed}
.badge{display:inline-block;padding:1px 7px;border-radius:2px;background:var(--amberc);color:var(--carbon);font-size:10px;font-style:normal;letter-spacing:.5px}

.rules{margin:0 0 12px;padding:0;list-style:none}
.rules li{padding:6px 0 6px 18px;border-bottom:1px solid var(--hairline);position:relative}
.rules li:before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;background:var(--amberc);border:1px solid var(--chrome)}
.note{margin:0 0 12px;padding:10px 12px;background:var(--canvas-soft);border-left:4px solid var(--amberc);box-shadow:var(--bevel-in);color:#202638}
details{margin-top:10px}
summary{cursor:pointer;color:var(--link);font-weight:700;padding:4px 0}
.banlist{max-height:340px;overflow:auto;margin:8px 0 0;padding:0;list-style:none;font-size:13px;background:var(--platinum);border:1px solid var(--hairline);box-shadow:var(--bevel-in)}
.banlist li{padding:4px 10px;border-bottom:1px solid var(--hairline)}

/* inputs */
input[type=search],input[type=text],input[type=number],select,textarea{width:100%;padding:6px 9px;border:1px solid var(--carbon);border-radius:2px;background:#fff;color:#202638;box-shadow:var(--bevel-in);font-size:14px}
@media(prefers-color-scheme:dark){input[type=search],input[type=text],input[type=number],select,textarea{background:#161b28;color:#e8f0fb;border-color:var(--hairline)}}
textarea{min-height:200px;resize:vertical;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace}

/* buttons: yellow = everyday tool, red = go, carbon = secondary */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--chrome);border-radius:2px;background:var(--amberc);color:var(--carbon);font:800 12px var(--sans);text-transform:uppercase;letter-spacing:.5px;text-decoration:none;box-shadow:var(--bevel)}
.btn:hover{background:var(--amber-press)}
.btn:active{box-shadow:var(--bevel-in);transform:translateY(1px)}
.btn.go{background:var(--signal);color:#fff;padding:11px 18px}
.btn.go:hover{background:var(--signal-deep)}
.btn.alt{background:var(--carbon);color:#fff}
.btn.alt:hover{background:var(--chrome)}
.btn.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* results */
.banner{margin:12px 0;padding:10px 14px;background:var(--surface);border:1px solid var(--bad);border-left:6px solid var(--signal-deep);box-shadow:var(--bevel-in);border-radius:2px;color:var(--tx)}
.banner h3{font:900 15px var(--display);color:var(--bad);margin-bottom:4px}
.banner ul{margin:4px 0 0;padding-left:18px}.banner li{margin:3px 0}
.banner.ok{border-color:var(--chrome);border-left-color:#2f6fed}.banner.ok h3{color:var(--deep);margin:0}
.banner.warn{border-color:var(--amber-press);border-left-color:var(--amberc)}.banner.warn h3{color:var(--tx)}
.deck{list-style:none;border:1px solid var(--chrome);box-shadow:var(--bevel)}
.deck li{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--hairline)}
.deck li.bad{background:#fdecee}
@media(prefers-color-scheme:dark){.deck li.bad{background:#3a1a22}}
.deck .q{color:var(--deep);font-weight:900;text-align:right}
.deck .nm small{color:var(--deep);margin-left:6px}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:1px solid var(--carbon)}
.tag{display:inline-block;padding:2px 7px;border-radius:2px;background:var(--signal-deep);color:#fff;font:800 11px var(--sans);letter-spacing:.5px;white-space:nowrap}
.tag.nf{background:var(--amberc);color:var(--carbon)}
.why{display:block;font-size:11px;color:var(--bad);text-align:right;margin-top:2px;font-weight:700}

/* builder */
.form{display:grid;gap:14px;max-width:760px}
.form label{display:grid;gap:4px;font-weight:700;color:var(--tx)}
.form label span.h{font-weight:400;color:var(--deep);font-size:12px}
.checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.checks label{display:inline-flex;grid-auto-flow:column;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--chrome);border-radius:2px;background:var(--platinum);cursor:pointer;font-size:13px}
.checks label:has(input:checked){background:var(--amberc);color:var(--carbon)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.pick{position:relative;margin-top:4px}
.hits{position:absolute;left:0;right:0;z-index:5;background:var(--surface);border:1px solid var(--chrome);box-shadow:var(--bevel);max-height:240px;overflow:auto}
.hits button{display:block;width:100%;text-align:left;padding:7px 10px;color:var(--tx)}
.hits button:hover{background:var(--canvas-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;gap:6px;align-items:center;padding:3px 4px 3px 9px;border-radius:2px;background:var(--carbon);color:#fff;font-size:12px}
.chip button{color:#fff;font-size:16px;line-height:1;padding:0 4px}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--amberc);color:var(--carbon);border:1px solid var(--chrome);box-shadow:var(--bevel);font-weight:800;padding:9px 18px;border-radius:2px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
#toast.on{opacity:1;transform:translate(-50%,0)}
.foot{margin-top:14px;padding:12px 16px;background:var(--carbon);background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:4px 4px;color:var(--on-dark-soft);font-size:11px;border-top:2px solid var(--chrome)}
.foot a{color:var(--amberc)}
@media(max-width:480px){.brand span{display:none}.strip a{padding:6px 10px}}

/* pull sheet: only exists for printing */
#sheet{display:none}
@media print{
  @page{margin:.5in}
  body{background:#fff}
  body>*:not(#sheet){display:none!important}
  #sheet{display:block;color:#000;font-family:Arial,Helvetica,sans-serif}
  #sheet h1{color:#000;text-shadow:none;font:900 1.5em var(--display);margin:0 0 2px}
  #sheet p{margin:0 0 8px;color:#444;font-size:.8em}
  #sheet ol{list-style:none;margin:0;padding:0;column-count:2;column-gap:28px}
  #sheet li{display:flex;gap:.6em;align-items:baseline;line-height:1.35;break-inside:avoid;border-bottom:1px solid #ddd}
  #sheet .bx{display:inline-block;width:.8em;height:.8em;border:1.5px solid #000;flex:none;transform:translateY(.1em)}
  #sheet .q{font-weight:700;min-width:1.6em;text-align:right}
  #sheet .nl{margin-left:auto;font-weight:700;font-size:.75em;border:1.5px solid #000;padding:0 .3em}
}

/* phones: paste box first, rules second; 16px fields so iOS doesn't zoom on focus */
@media(max-width:820px){
  .split{display:flex;flex-direction:column}.pastecol{order:-1}
  input,select,textarea{font-size:16px!important}
}