/* gopod_notes/UNDER_CONSTRUCTION_005/wordsearch.css */
/* wordsearch.css — word search settings (from gopod_word_search_model.html).
   Loads after crushn8r.css, so it wins where they clash. crewdnews.css overrides it. */

:root{
  --stage:#16202e; --stage2:#1e2c3f; --paper:#faf6ec; --ink:#17202a;
  --doc:#23b5b5; --pip:#f2a63b; --line:rgba(255,255,255,.12); --muted:#8fa1b3;
  --paper-line:#e6ddc7;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--stage); color:#eaf1f7;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; padding:24px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px;margin:0 auto}

.masthead{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:
   linear-gradient(180deg,var(--stage2),var(--stage));}
.masthead .bar{display:flex;align-items:center;gap:14px;padding:18px 22px}
.dot{width:12px;height:12px;border-radius:50%}
.dot.d{background:var(--doc)} .dot.p{background:var(--pip)}
.masthead h1{margin:0;font-size:clamp(20px,3.4vw,30px);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.masthead .tag{margin-left:auto;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.voices{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.voice{padding:14px 22px;display:flex;gap:12px;align-items:flex-start}
.voice + .voice{border-left:1px solid var(--line)}
.tagname{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;white-space:nowrap;margin-top:2px}
.voice.doc .tagname{background:var(--doc);color:#04201f}
.voice.pip .tagname{background:var(--pip);color:#3a2503}
.voice p{margin:0;font-size:14px}
.voice.doc p{color:#d6f3f3} .voice.pip p{color:#fbe6c7}

.panel{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--stage2);padding:18px 20px}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
textarea,select{font:inherit;background:var(--stage);color:#eaf1f7;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px}
textarea{width:100%;min-height:92px;resize:vertical;font-size:13px;line-height:1.7}
.field.grow{flex:1 1 320px}
select{min-width:150px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
button{font:inherit;font-weight:700;letter-spacing:.02em;border:none;border-radius:9px;
  padding:11px 18px;cursor:pointer;transition:transform .05s ease, filter .15s ease}
button:active{transform:translateY(1px)}
button:focus-visible{outline:3px solid var(--pip);outline-offset:2px}
.primary{background:var(--doc);color:#04201f}
.ghost{background:transparent;color:#eaf1f7;border:1px solid var(--line)}
.ghost:hover{filter:brightness(1.2)}

.sheet{margin-top:18px;background:var(--paper);color:var(--ink);border-radius:14px;
  padding:26px;display:grid;grid-template-columns:1fr 250px;gap:26px;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.sheet .head{grid-column:1 / -1;display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.sheet .head h2{margin:0;font-size:18px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.sheet .head .sub{margin-left:auto;font-size:12px;color:#6b6152;letter-spacing:.06em}

.grid{display:grid;gap:2px;justify-content:start}
.cell{width:var(--cs,30px);height:var(--cs,30px);display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  font-size:calc(var(--cs,30px) * .52);font-weight:600;color:var(--ink);border-radius:4px;user-select:none}
.cell.digit{color:var(--pip);font-weight:800}
.cell.sol{background:rgba(35,181,181,.28);outline:1px solid var(--doc)}

.words h3{margin:0 0 4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6b6152}
.words .cat{margin:0 0 10px;font-size:11px;color:#9a8f78;letter-spacing:.04em}
.words ul{list-style:none;margin:0;padding:0;font-size:14px}
.words li{padding:3px 0;cursor:pointer;letter-spacing:.02em;font-weight:600}
.words li .txt{text-transform:uppercase}
.words li.phrase .txt{text-transform:none;font-style:italic}
.words li::before{content:"□ ";color:#b3a888}
.words li.done{color:#a99f8b;text-decoration:line-through}
.words li.done::before{content:"■ ";color:var(--pip)}
.words li .badge{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--pip);
  border:1px solid var(--pip);border-radius:4px;padding:1px 4px;margin-left:6px;vertical-align:1px}

.footnote{grid-column:1 / -1;border-top:1px dashed var(--paper-line);padding-top:12px;
  font-size:11px;color:#8a8071;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:720px){
  .voices{grid-template-columns:1fr} .voice + .voice{border-left:none;border-top:1px solid var(--line)}
  .sheet{grid-template-columns:1fr} .btns{margin-left:0;width:100%}
}
@media print{
  body{background:#fff;color:#000;padding:0}
  .masthead .bar,.panel,.voice.pip,.tag,.dot{display:none!important}
  .voices{grid-template-columns:1fr;border:none}
  .masthead{border:none}
  .voice.doc{padding:0 0 8px}
  .sheet{box-shadow:none;border:1px solid #000;background:#fff;margin:12px}
  .cell.sol{background:none;outline:none;font-weight:800}
  .cell.digit{color:#000}
}

/* ---- drag-to-find grid (from the under-construction index.html) ---- */
.ws-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
#ws-grid {
  display: grid; gap: 2px; margin: 12px auto;
  width: 100%; max-width: 480px;
  container-type: inline-size;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.ws-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: #0d0d0f; border: 0; border-radius: 3px;
  font-size: clamp(11px, 3.8vw, 17px);
  font-size: calc(100cqw / var(--n, 15) * 0.6);
  font-weight: 600; cursor: pointer;
}
.ws-cell.sol { background: rgba(35,181,181,.28); outline: 1px solid var(--doc); }
.ws-cell.sel { background: var(--accent2); color:#fff; border-color: var(--accent2); }
.ws-cell.found { background: var(--doc); color:#04201f; outline: none; }
#ws-words { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; }
#ws-words li { font-size: 14px; color: inherit; cursor: default; font-weight: 600; white-space: nowrap; }
#ws-words li.got { cursor: pointer; }
#ws-words li::before { content: "□ "; color: var(--muted); }
#ws-words li.done::before { content: "■ "; color: var(--pip); }
#ws-words li.phrase .txt { font-style: italic; }
#ws-words li .badge {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--pip);
  border: 1px solid var(--pip); border-radius: 4px; padding: 1px 4px; margin-left: 5px; vertical-align: 1px;
}
#ws-words li.done { color: var(--muted); text-decoration: line-through; }
.ws-note { font-size: 13px; color: var(--muted); text-align:center; margin-top: 10px; }

@media print {
  header, .crewdnews, .ws-head, .ws-note, footer { display: none !important; }
  section { border: 0; background: #fff; }
  .ws-cell, .ws-cell.sel, .ws-cell.found { background: #fff; color: #000; }
  .ws-cell.sol { background: none; outline: none; font-weight: 800; }
  .ws-cell.digit { color: #000; }
  #ws-words li { color: #000; }
  .masthead { background: none; }
  .voice.doc p, .voice.pip p { color: #000; }
}

/* phones: less body padding so the grid gets the width */
@media (max-width: 480px) {
  body { padding: 6px; }
}
/* ## EOF */