/* ──────────────────────────────────────────────────────────────────────────
   Lantern HOA — shared styles for the public tool pages (landing/tools/*).

   Loaded alongside wedge.css. Two jobs:
     1. Style the tool's form + live preview on screen.
     2. Print cleanly: when the user prints, everything except the artifact is
        hidden, so a letter page comes out with just the sign / map / checklist.

   Every generated artifact carries a "Made with Lantern" attribution line —
   that is the growth loop, so do not remove it.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tool layout ── */
/* Vertical-only padding: .tool-grid is also the .wrap, and a `padding:44px 0 70px`
   shorthand would zero the side padding and push the panel to the screen edge. */
.tool-grid { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(24px,4vw,48px);
  align-items:start; padding-top:44px; padding-bottom:70px; }
.tool-grid > * { min-width:0; }
.panel { position:sticky; top:92px; background:var(--white); border:1px solid var(--border);
  border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
.panel h2 { font-size:1.15rem; margin-bottom:5px; }
.panel .hint { font-size:.86rem; color:var(--slate); margin-bottom:18px; }
.panel .field { margin-bottom:14px; }
.panel label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.panel label .opt { font-weight:400; color:var(--slate); }
.panel input[type=text], .panel input[type=url], .panel input[type=date], .panel input[type=time],
.panel textarea, .panel select {
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); padding:11px 13px;
  border:1px solid var(--border); border-radius:11px; background:var(--white); }
.panel textarea { resize:vertical; min-height:96px; line-height:1.5; }
.panel input:focus, .panel textarea:focus, .panel select:focus { outline:none; border-color:var(--forest-light);
  box-shadow:0 0 0 3px rgba(61,133,99,.16); }
.panel .row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.panel .btn { width:100%; justify-content:center; margin-top:6px; }
.panel .btn + .btn { margin-top:9px; }
.panel .checks { display:grid; gap:8px; max-height:260px; overflow-y:auto; padding:2px; }
.panel .checks label { display:flex; align-items:flex-start; gap:9px; font-weight:500; font-size:13.5px;
  margin:0; cursor:pointer; }
.panel .checks input { width:auto; margin-top:2px; accent-color:var(--forest); }

.preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; }
.preview-head .lbl { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); }
.stage { background:var(--sage); border:1px solid var(--border); border-radius:20px; padding:clamp(14px,2.5vw,26px); }

/* ── The printable artifact ── */
.sheet { background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg);
  padding:clamp(24px,4vw,46px); color:var(--ink); }
.sheet-brand { display:flex; align-items:center; gap:9px; }
.sheet-brand .mk { width:28px; height:28px; border-radius:8px; background:var(--forest); display:flex;
  align-items:center; justify-content:center; }
.sheet-brand .mk svg { width:16px; height:16px; }
.sheet-brand span { font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--forest); }
.sheet h2, .sheet h3 { font-family:var(--serif); }
.attribution { margin-top:26px; padding-top:14px; border-top:1px solid var(--border);
  font-size:.76rem; color:var(--slate); display:flex; justify-content:space-between; gap:12px;
  flex-wrap:wrap; }
.attribution b { color:var(--forest); font-weight:600; }

/* Court sign */
.sign { text-align:center; }
.sign .kicker { font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:10px; }
.sign h2 { font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.05; letter-spacing:-.03em; margin-bottom:8px; }
.sign .sub { color:var(--slate); font-size:1rem; margin-bottom:22px; }
.sign .qr { display:inline-block; padding:14px; background:#fff; border:2px solid var(--forest-tint);
  border-radius:16px; }
.sign .qr canvas { display:block; width:210px; height:210px; }
.sign .scan { margin-top:12px; font-weight:650; font-size:1.02rem; }
.sign .rules { text-align:left; max-width:420px; margin:22px auto 0; display:grid; gap:7px; }
.sign .rules li { list-style:none; position:relative; padding-left:20px; font-size:.93rem; color:#35413D; }
.sign .rules li::before { content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--forest); }

/* Garage sale map / stop list */
.stops { display:grid; gap:9px; margin-top:16px; }
.stop { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border);
  border-radius:12px; padding:11px 13px; }
.stop .n { flex:none; width:26px; height:26px; border-radius:50%; background:var(--forest);
  color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
.stop b { display:block; font-size:.95rem; }
.stop span { display:block; font-size:.85rem; color:var(--slate); }

/* Checklist */
.cl { display:grid; gap:10px; margin-top:16px; }
.cl-item { display:flex; gap:11px; align-items:flex-start; }
.cl-box { flex:none; width:17px; height:17px; border:1.5px solid var(--slate); border-radius:4px;
  margin-top:3px; }
.cl-item div b { display:block; font-size:.95rem; }
.cl-item div span { display:block; font-size:.86rem; color:var(--slate); }
.cl-section { font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--forest-deep);
  margin-top:18px; padding-bottom:5px; border-bottom:1px solid var(--border); }
.cl-section:first-child { margin-top:0; }

/* Board proposal */
.prop-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:18px 0; }
.prop-stat { text-align:center; border:1px solid var(--border); border-radius:13px; padding:13px 8px;
  background:var(--sage); }
.prop-stat strong { display:block; font-family:var(--serif); font-size:1.5rem; color:var(--forest-deep);
  line-height:1.1; }
.prop-stat span { display:block; font-size:.7rem; color:var(--slate); margin-top:3px; }
.prop-two { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:6px; }
.prop-two h3 { font-size:1rem; margin-bottom:8px; color:var(--forest-deep); }
.prop-two ul { display:grid; gap:6px; }
.prop-two li { list-style:none; position:relative; padding-left:18px; font-size:.88rem; color:#35413D; }
.prop-two li::before { content:""; position:absolute; left:2px; top:.5em; width:6px; height:6px;
  border-radius:50%; background:var(--forest); }

@media (max-width:900px) {
  .tool-grid { grid-template-columns:1fr; padding-top:30px; }
  .panel { position:static; }
  .prop-two { grid-template-columns:1fr; }
}

/* ── Print: only the artifact ── */
@media print {
  @page { size:letter; margin:0.5in; }
  body { background:#fff !important; }
  header.site, footer.site, .panel, .preview-head, .tool-intro, .tool-faq, .no-print,
  .scroll-progress { display:none !important; }
  .tool-grid { display:block !important; padding:0 !important; }
  .stage { background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; }
  .sheet { box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important;
    max-width:none !important; }
  .wrap { max-width:none !important; padding:0 !important; }
  .sign .qr { border-color:#ccc !important; }
  a { text-decoration:none !important; color:var(--ink) !important; }
  .attribution { border-top:1px solid #ddd !important; }
}