/* The Learning District - Word Search Maker */

:root {
  --blue-950:#071a3d; --blue-900:#0d2b63; --blue-800:#123d8a; --blue-700:#1d5be3; --blue-600:#2563eb; --blue-100:#eaf2ff;
  --yellow:#f7b915; --yellow-2:#ffd85a; --red:#ef3340; --green:#12a36d; --purple:#7c3aed;
  --ink:#182033; --muted:#667085; --paper:#fff; --line:#d9e2f1; --soft:#f6f8fc; --dark:#171914;
  --shadow:0 24px 65px rgba(13,43,99,.16);
  --answer-1:#ef4444; --answer-2:#2563eb; --answer-3:#12a36d; --answer-4:#f59e0b; --answer-5:#8b5cf6;
  --answer-6:#ec4899; --answer-7:#06b6d4; --answer-8:#84cc16;
}

*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#f4f7fb}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
.hidden{display:none!important}

.topbar{position:sticky;top:0;z-index:50;background:#171914;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{width:min(1180px,calc(100% - 24px));margin:0 auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em;color:white}
.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:7px;background:linear-gradient(135deg,var(--blue-700),var(--blue-900));box-shadow:0 8px 18px rgba(37,99,235,.25)}
.brand-mark span{border-radius:4px;background:white;opacity:.94}
.brand-text{line-height:.9;font-size:1.36rem}.brand-text strong{display:block}.brand-dot{color:var(--yellow)}
.nav-links{display:flex;align-items:center;gap:8px;color:#dbe4f0;font-weight:900;font-size:.94rem}
.nav-links a{padding:12px 14px;border-radius:999px;opacity:.92}.nav-links a:hover,.nav-links a.active{background:#2d3340;color:white;opacity:1}

.hero{position:relative;isolation:isolate;overflow:hidden;color:white;background:radial-gradient(circle at 16% 10%,rgba(255,216,90,.38),transparent 19rem),radial-gradient(circle at 82% 18%,rgba(18,163,109,.22),transparent 20rem),linear-gradient(135deg,#164bd7 0%,#1d5be3 60%,#0d2b63 100%)}
.letter-pattern{position:absolute;inset:0;z-index:-1;color:white;opacity:.12;font-size:16px;line-height:4.1;letter-spacing:34px;font-weight:900;transform:rotate(-1deg) scale(1.05);pointer-events:none;user-select:none}
.hero-inner{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:62px 0 68px}
.eyebrow,.mini-kicker{display:inline-flex;width:fit-content;margin:0;padding:8px 12px;border-radius:999px;background:var(--yellow);color:#251900;font-weight:900;font-size:.86rem}
.hero h1{margin:22px 0 12px;font-size:clamp(3rem,7.7vw,6.2rem);line-height:.9;letter-spacing:-.075em}
.hero-copy{max-width:720px;margin:0;color:rgba(255,255,255,.92);font-size:clamp(1.08rem,2.3vw,1.42rem);line-height:1.45}

.builder{background:#171914;color:white;padding:46px 0 54px}
.builder-inner{width:min(1180px,calc(100% - 24px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}
.settings-card,.tips-card{border:1px solid rgba(255,216,90,.28);background:#1b1d14;border-radius:26px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.settings-card{padding:26px}.tips-card{padding:24px;position:sticky;top:100px}
.card-title-row{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:22px}
.settings-card h2,.tips-card h2{margin:12px 0 0;font-size:1.75rem;letter-spacing:-.045em}
.field{margin:18px 0}
label,legend{display:block;margin-bottom:9px;font-weight:900;color:white}
label span{color:var(--yellow);font-size:.78rem;margin-left:6px;font-weight:800}
input[type=text],textarea,select{width:100%;border:1px solid rgba(255,216,90,.28);background:#171914;color:#fff7d1;border-radius:14px;padding:14px 15px;outline:none}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(247,185,21,.12)}
textarea{min-height:180px;resize:vertical;line-height:1.45}
.hint,.status,.file-help{margin:10px 0 0;color:#c7bd70;line-height:1.45;font-size:.94rem}.status.error{color:#ffb4b8}.status.success{color:#b8f4d8}.file-help{font-size:.86rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.settings-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:16px;align-items:end}
.segmented{display:flex;flex-wrap:wrap;gap:10px}.segmented label{margin:0;cursor:pointer}.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented span{display:inline-grid;place-items:center;min-height:44px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,216,90,.35);color:white;background:#171914;transition:.16s ease}
.segmented input:checked+span{background:var(--blue-600);border-color:#8bb6ff;box-shadow:0 10px 24px rgba(37,99,235,.28)}
.directions{margin:20px 0;padding:0;border:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}.directions legend{grid-column:1/-1;margin-bottom:10px}
.directions label{display:flex;gap:10px;align-items:center;margin:0;color:white;font-weight:800}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue-600)}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px;border-top:1px solid rgba(255,216,90,.2)}
button{border:0;cursor:pointer;font-weight:900;border-radius:16px;min-height:52px;padding:0 18px;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}
button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.48}
.primary-button{background:var(--blue-600);color:white;box-shadow:0 16px 32px rgba(37,99,235,.24)}
.secondary-button,.ghost-button{background:#2d3340;color:white}.ghost-button{min-height:42px;border-radius:999px}
.tips-card ul{margin:14px 0 22px;padding-left:20px;color:#e6dfb3;line-height:1.6}
.feature-badges{display:flex;flex-wrap:wrap;gap:9px}.feature-badges span{display:inline-flex;padding:8px 10px;border-radius:999px;background:rgba(37,99,235,.2);border:1px solid rgba(139,182,255,.25);color:#dbeafe;font-size:.82rem;font-weight:900}

.preview-shell{width:min(1180px,calc(100% - 24px));margin:0 auto;padding:46px 0 68px}
.preview-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}.preview-toolbar h2{margin:0;color:var(--blue-900);font-size:2rem;letter-spacing:-.04em}.preview-toolbar p{margin:0;color:var(--muted)}
.worksheet{width:min(8.5in,100%);min-height:11in;margin:0 auto 28px;padding:.55in;background:white;border:1px solid #d7dee8;box-shadow:var(--shadow);color:#111827}
.worksheet-header{text-align:center;margin-bottom:.25in}.worksheet-brand{margin:0 0 .08in;color:var(--blue-700);text-transform:uppercase;font-weight:900;letter-spacing:.1em;font-size:.82rem}
.worksheet-header h2{margin:0;color:#111827;font-size:2rem;line-height:1.08}.worksheet-instructions{margin:.12in auto 0;max-width:6.8in;color:#4b5563}
.empty-state{min-height:6.6in;display:grid;place-items:center;align-content:center;text-align:center;color:#7a7f8a}.empty-state h3{margin:.22in 0 .05in;color:var(--blue-900)}.empty-state p{margin:0}
.empty-grid{display:grid;grid-template-columns:repeat(5,.28in);gap:.03in;opacity:.32}.empty-grid span{width:.28in;height:.28in;display:grid;place-items:center;font-family:"Courier New",monospace;font-weight:900}

.grid-wrap{display:flex;justify-content:center;margin:.2in 0 .32in}

.letter-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-size, 15), var(--cell-size, .31in));
  grid-auto-rows:var(--cell-size, .31in);
  gap:0;
  position:relative;
}

.letter-cell{
  width:var(--cell-size, .31in);
  height:var(--cell-size, .31in);
  display:grid;
  place-items:center;
  font-family:"Courier New", monospace;
  font-weight:900;
  font-size:calc(var(--cell-size, .31in) * .54);
  line-height:1;
  color:#111827;
  position:relative;
  z-index:1;
}

.answer-grid-wrap{
  position:relative;
  display:inline-block;
}

.answer-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}

.answer-word-list li{
  display:flex;
  align-items:center;
  gap:.08in;
}

.answer-swatch{
  width:.22in;
  height:.15in;
  border-radius:999px;
  border:3px solid currentColor;
  display:inline-block;
  flex:0 0 auto;
  background:transparent;
}

.word-list-section{margin-top:.18in;break-inside:avoid}.word-list-section h3,.skipped-section h3{margin:0 0 .12in;color:#111827;font-size:1rem;text-transform:uppercase;letter-spacing:.08em}
.word-list{list-style:none;margin:0;padding:0;columns:3;column-gap:.35in}.word-list li{break-inside:avoid;margin:0 0 .08in;font-weight:800;color:#111827}
.skipped-section{margin-top:.25in;padding:.16in;background:#fff7ed;border:1px solid #fed7aa;border-radius:.12in;color:#7c2d12}
.footer{background:linear-gradient(135deg,#164bd7,#0d2b63);color:white;padding:38px 0}.footer-inner{width:min(1180px,calc(100% - 32px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.footer p{margin:0;color:#dbeafe;max-width:620px;line-height:1.5}

@media(max-width:980px){.builder-inner{grid-template-columns:1fr}.tips-card{position:static}.settings-grid{grid-template-columns:1fr}.actions{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.nav{display:grid;align-items:start;padding:14px 0}.nav-links{flex-wrap:wrap;gap:6px}.nav-links a{padding:9px 10px;font-size:.86rem}.hero-inner{padding:44px 0 48px}.settings-card,.tips-card{border-radius:20px;padding:18px}.card-title-row{display:grid}.directions{grid-template-columns:1fr}.actions{grid-template-columns:1fr}.worksheet{padding:.25in;min-height:auto}.worksheet-header h2{font-size:1.45rem}.word-list{columns:2}.footer-inner{display:grid}}

@media print{
  @page{size:letter portrait;margin:.35in}
  html,body{background:white!important;color:black!important}
  .no-print,.topbar,.hero,.builder,.preview-toolbar,.footer{display:none!important}
  .preview-shell{width:auto;margin:0;padding:0}
  .worksheet{display:block!important;width:auto;min-height:auto;margin:0;padding:0;border:0;box-shadow:none;page-break-after:always}
  .worksheet.hidden{display:none!important}
  .worksheet.print-target{display:block!important}
  .worksheet:not(.print-target){display:none!important}
  .worksheet-brand{color:black!important}.worksheet-header{margin-bottom:.2in}.worksheet-header h2{font-size:24pt}.worksheet-instructions{color:#333!important}.grid-wrap{margin:.18in 0 .25in}
  .letter-cell{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .answer-overlay rect{
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
  .word-list li{font-size:11pt}.skipped-section{border:1pt solid black;background:white!important;color:black!important}
}

.word-list-section:empty{display:none!important}


/* v4: simplified settings and compact worksheet list */
.settings-grid{
  grid-template-columns:1fr;
}

.word-list.many-words{
  columns:4;
  column-gap:.25in;
}

.word-list.many-words li{
  font-size:.9rem;
  margin-bottom:.045in;
}

.word-list.max-words li{
  font-size:.82rem;
  margin-bottom:.035in;
}

@media print{
  .word-list.many-words{
    columns:4;
    column-gap:.22in;
  }

  .word-list.many-words li{
    font-size:9.2pt;
    margin-bottom:.035in;
  }

  .word-list.max-words li{
    font-size:8.4pt;
    margin-bottom:.022in;
  }

  .word-list-section{
    margin-top:.08in;
  }
}


/* v5: automatic size and Easy/Standard difficulty */
.difficulty-options span{
  min-width:120px;
}

.word-list-section{
  margin-top:.10in;
}

@media print{
  .worksheet{
    padding:0 !important;
  }

  .worksheet-header{
    margin-bottom:.10in;
  }

  .worksheet-header h2{
    font-size:20pt;
  }

  .worksheet-instructions{
    font-size:10pt;
    margin-top:.05in;
  }

  .grid-wrap{
    margin:.08in 0 .14in;
  }

  .letter-cell{
    font-size:calc(var(--cell-size, .31in) * .60);
  }

  .word-list-section{
    margin-top:.04in;
  }

  .word-list{
    columns:4;
    column-gap:.18in;
  }

  .word-list li{
    font-size:8.8pt;
    margin-bottom:.018in;
  }

  .word-list.max-words li{
    font-size:7.9pt;
    margin-bottom:.01in;
  }
}


/* v6: phone layout fixes */
@media (max-width: 680px){
  .preview-shell{
    width:100%;
    padding:24px 8px 42px;
  }

  .worksheet{
    width:100%;
    max-width:100%;
    padding:14px 8px;
    min-height:auto;
    margin-bottom:18px;
    overflow:hidden;
  }

  .worksheet-header{
    margin-bottom:8px;
  }

  .worksheet-brand{
    font-size:.62rem;
    margin-bottom:4px;
  }

  .worksheet-header h2{
    font-size:1.2rem;
    line-height:1.05;
  }

  .worksheet-instructions{
    font-size:.75rem;
    margin-top:5px;
    line-height:1.25;
  }

  .grid-wrap{
    width:100%;
    margin:8px 0 10px;
    overflow:visible;
  }

  .letter-grid,
  .answer-grid-wrap{
    transform-origin:top center;
  }

  /* Keep large grids visible on phones instead of forcing horizontal overflow. */
  .letter-grid{
    max-width:100%;
  }

  .word-list-section{
    margin-top:6px;
  }

  .word-list,
  .word-list.many-words,
  .word-list.max-words{
    columns:4;
    column-gap:8px;
    width:100%;
  }

  .word-list li,
  .word-list.many-words li,
  .word-list.max-words li{
    font-size:.62rem;
    line-height:1.05;
    margin-bottom:3px;
    overflow-wrap:anywhere;
  }

  .answer-swatch{
    width:14px;
    height:9px;
    border-width:2px;
  }
}

/* Extra-small phones: still keep columns, but reduce type further. */
@media (max-width: 390px){
  .word-list,
  .word-list.many-words,
  .word-list.max-words{
    columns:4;
    column-gap:6px;
  }

  .word-list li,
  .word-list.many-words li,
  .word-list.max-words li{
    font-size:.56rem;
  }
}

/* When printing from a phone browser, be more aggressive about keeping the list with the puzzle. */
@media print{
  .worksheet{
    overflow:visible !important;
  }

  .word-list,
  .word-list.many-words,
  .word-list.max-words{
    columns:5;
    column-gap:.12in;
  }

  .word-list li,
  .word-list.many-words li,
  .word-list.max-words li{
    font-size:7.3pt;
    line-height:1.02;
    margin-bottom:0;
  }

  .worksheet-header h2{
    font-size:18pt;
  }

  .worksheet-instructions{
    font-size:8.8pt;
  }

  .grid-wrap{
    margin:.04in 0 .08in;
  }
}


/* v8: explicit grid word lists instead of CSS columns; better for phone print preview */
.word-list.word-grid-list,
.word-list.word-grid-list.many-words,
.word-list.word-grid-list.max-words{
  columns:auto !important;
  column-gap:0 !important;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.055in .18in;
}

.word-list.word-grid-list.many-words{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.04in .16in;
}

.word-list.word-grid-list.max-words{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.025in .12in;
}

.word-list.word-grid-list li{
  margin:0 !important;
  break-inside:auto;
  min-width:0;
  overflow-wrap:anywhere;
}

@media(max-width:680px){
  .word-list.word-grid-list,
  .word-list.word-grid-list.many-words,
  .word-list.word-grid-list.max-words{
    columns:auto !important;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:3px 7px;
  }

  .word-list.word-grid-list.max-words{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:2px 5px;
  }
}

@media print{
  .word-list.word-grid-list,
  .word-list.word-grid-list.many-words,
  .word-list.word-grid-list.max-words{
    columns:auto !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:.012in .09in;
  }

  .word-list.word-grid-list li,
  .word-list.word-grid-list.many-words li,
  .word-list.word-grid-list.max-words li{
    font-size:7.2pt;
    line-height:1;
    margin:0 !important;
  }
}

/* v9: compact save and share controls */
.share-button{background:#f4c430;color:#172033;box-shadow:0 16px 32px rgba(244,196,48,.18)}
.share-panel{margin-top:14px;padding:14px;border:1px solid rgba(255,216,90,.24);border-radius:16px;background:rgba(18,24,36,.55)}
.share-panel label{display:block;font-weight:900;margin-bottom:8px;color:#fff}
.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.share-row input{min-width:0;width:100%;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#111722;color:#fff;padding:0 12px}
.compact-button{min-height:44px;border-radius:12px;padding:0 14px}
@media(max-width:680px){.share-row{grid-template-columns:1fr 1fr}.share-row input{grid-column:1/-1;min-height:46px}}


/* Mobile action controls: keep the key teacher actions visible and easy to tap. */
.actions > button{
  min-width:0;
  width:100%;
  white-space:normal;
  line-height:1.15;
}

@media (max-width:680px){
  .actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
  }

  #generateBtn,
  #openPuzzleBtn{
    grid-column:1 / -1;
  }

  #sharePuzzleBtn,
  #savePuzzleBtn{
    display:block !important;
    visibility:visible !important;
  }

  #sharePuzzleBtn{
    order:5;
  }

  #savePuzzleBtn{
    order:6;
  }

  #openPuzzleBtn{
    order:7;
  }

  .file-help{
    margin-top:12px;
    font-size:.88rem;
  }
}

@media (max-width:390px){
  .actions{
    grid-template-columns:1fr;
  }

  #generateBtn,
  #openPuzzleBtn{
    grid-column:auto;
  }
}