/* The Learning District - Blank Flashcard Sheet 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;
  --ink:#182033; --muted:#667085; --paper:#fff; --line:#d9e2f1; --soft:#f6f8fc; --dark:#171914;
  --shadow:0 24px 65px rgba(13,43,99,.16);
  --page-w:8.5in;
  --page-h:11in;
  --sheet-margin:0in;
  --card-w:2.125in;
  --card-h:2.2in;
  --cols:4;
  --rows:5;
  --flag-w:.55in;
  --flag-h:.36in;
}

*{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:58px 0 64px}
.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(2.9rem,7vw,5.8rem);line-height:.9;letter-spacing:-.075em}
.hero-copy{max-width:760px;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{display:block;margin-bottom:9px;font-weight:900;color:white}
select{width:100%;border:1px solid rgba(255,216,90,.28);background:#171914;color:#fff7d1;border-radius:14px;padding:14px 15px;outline:none}
select:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(247,185,21,.12)}
.hint,.status{margin:10px 0 0;color:#c7bd70;line-height:1.45;font-size:.94rem}.status.error{color:#ffb4b8}.status.success{color:#b8f4d8}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));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)}
.actions{display:grid;grid-template-columns:1.2fr .9fr .9fr;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)}
.sheet{width:var(--page-w);height:var(--page-h);margin:0;background:white;border:1px solid #d7dee8;box-shadow:var(--shadow);position:relative;overflow:hidden}
.sheet-block{width:var(--page-w);margin:0 auto 34px}.sheet-label{display:inline-flex;width:max-content;margin:0 0 8px;background:#111827;color:white;border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:900}
.card-stage{position:absolute;inset:0}
.grid-layout{position:absolute;left:0;top:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr)}
.playing-layout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,var(--card-w));grid-template-rows:repeat(3,var(--card-h))}
.card{position:relative;background:white;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-right:1px dashed #9ca3af;border-bottom:1px dashed #9ca3af;pointer-events:none}
.grid-layout .card:nth-child(var(--cols)n)::after{border-right:0}
.flag{position:absolute;width:var(--flag-w);height:var(--flag-h);object-fit:contain;z-index:2}
.flag.top-left{left:.12in;top:.10in}.flag.top-right{right:.12in;top:.10in}.flag.bottom-left{left:.12in;bottom:.10in}.flag.bottom-right{right:.12in;bottom:.10in}
.playing-layout .card{width:var(--card-w);height:var(--card-h)}
.playing-layout .card::after{border:1px dashed #9ca3af}
.mirrored .card{transform:scaleX(-1)}
.mirrored .flag{transform:scaleX(-1)}

.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}.actions{grid-template-columns:1fr}.preview-shell{width:100%;padding:24px 8px 42px;overflow:hidden}.sheet{transform-origin:top center;margin-bottom:calc((var(--page-h) * var(--mobile-scale, .45)) - var(--page-h) + 28px);}.footer-inner{display:grid}}

@media print{
  @page{size:letter portrait;margin:0}
  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}
  .sheet{display:block!important;width:var(--page-w)!important;height:var(--page-h)!important;margin:0!important;border:0!important;box-shadow:none!important;page-break-after:always;overflow:hidden!important}
  .sheet:not(.print-target){display:none!important}
  .sheet.print-target{display:block!important}
  .card::after,.playing-layout .card::after{border-color:#8a8f98!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .flag{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}


/* v3: keep preview badges outside printable sheet area */
@media(max-width:680px){
  .sheet-block{
    width:var(--page-w);
    transform-origin:top center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:calc((var(--page-h) * var(--mobile-scale, .45)) - var(--page-h) + 46px);
  }

  .sheet-block .sheet{
    margin:0;
  }

  .sheet-block .sheet-label{
    margin-left:0;
    margin-bottom:8px;
  }

  .sheet{
    transform:none !important;
    margin-bottom:0 !important;
  }
}

@media print{
  .sheet-block{
    width:auto !important;
    margin:0 !important;
    transform:none !important;
  }

  .sheet-block:not(:has(.sheet.print-target)){
    display:none !important;
  }
}

@media print{
  .sheet-block{
    display:block !important;
  }

  .sheet-block:not(.print-block-target){
    display:none !important;
  }
}


/* v5: smaller flags for smaller cards and fixed back flag position */
.flag.auto-small{
  width:calc(var(--flag-w) * .76);
  height:calc(var(--flag-h) * .76);
}

.flag.auto-tiny{
  width:calc(var(--flag-w) * .64);
  height:calc(var(--flag-h) * .64);
}

/* For mirrored duplex backs, position the image so it appears upper-left after mirroring. */
.mirrored .flag.back-top-left{
  left:auto;
  right:.12in;
  top:.10in;
  bottom:auto;
}

.flag.back-top-left{
  left:.12in;
  right:auto;
  top:.10in;
  bottom:auto;
}

@media print{
  .flag.auto-small{
    width:calc(var(--flag-w) * .76);
    height:calc(var(--flag-h) * .76);
  }

  .flag.auto-tiny{
    width:calc(var(--flag-w) * .64);
    height:calc(var(--flag-h) * .64);
  }
}


/* v6: editable text before printing */
.compact-title-row{
  margin-top:24px;
  margin-bottom:8px;
  padding-top:18px;
  border-top:1px solid rgba(255,216,90,.2);
}

.text-options input[type=text],
.text-options textarea{
  width:100%;
  border:1px solid rgba(255,216,90,.28);
  background:#171914;
  color:#fff7d1;
  border-radius:14px;
  padding:14px 15px;
  outline:none;
}

.text-options textarea{
  min-height:130px;
  resize:vertical;
  line-height:1.4;
}

.text-options input[type=text]:focus,
.text-options textarea:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 4px rgba(247,185,21,.12);
}

.card-text{
  position:absolute;
  z-index:1;
  left:.18in;
  right:.18in;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-weight:900;
  color:#111827;
  line-height:1.08;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.card-text.small{font-size:.18in}
.card-text.medium{font-size:.24in}
.card-text.large{font-size:.32in}

.playing-layout .card-text.small{font-size:.22in}
.playing-layout .card-text.medium{font-size:.30in}
.playing-layout .card-text.large{font-size:.40in}

.mirrored .card-text{
  transform:translateY(-50%) scaleX(-1);
}

/* Edge-to-edge grid: internal dashed cut lines only. No outside page/card border. */
.grid-layout .card::after{
  border:0 !important;
}

.grid-layout .card{
  border:0 !important;
}

.grid-layout .card:not(.last-col)::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:100%;
  border-right:1px dashed #9ca3af !important;
  pointer-events:none;
}

.grid-layout .card:not(.last-row)::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0;
  border-bottom:1px dashed #9ca3af;
  pointer-events:none;
}

/* Playing-card mode still needs full trim outlines around each card. */
.playing-layout .card::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px dashed #9ca3af !important;
  pointer-events:none;
}

@media print{
  .card-text{
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }

  .grid-layout .card:not(.last-col)::after,
  .grid-layout .card:not(.last-row)::before,
  .playing-layout .card::after{
    border-color:#8a8f98 !important;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
}


/* v8: immediate editable-text prompts */
.text-mode-prompt{
  margin:10px 0 2px;
  color:#c7bd70;
}

.card-text-fields.hidden{
  display:none !important;
}


/* v9: Blank cards hides all card-text entry options and regenerates immediately */
#textSizeField.hidden,
#sameTextFields.hidden,
#listTextFields.hidden,
#textModePrompt.hidden{
  display:none !important;
}