/* =========================================================
   Blank, fillable document templates
   Editable-field styling + print refinements for .doc-sheet
   Loaded after styles.css on the template-*.html pages.
   ========================================================= */

/* Re-brand the sheet to the framework teal (the demo sheets use the
   microsite indigo). These four tokens recolor the whole sheet. */
.doc-sheet.tpl {
  --ds-accent:#01696f;
  --ds-accent-soft:#eef4f1;
}

/* ---- Fillable fields -------------------------------------------------- */
.doc-sheet .fill {
  outline:none;
  border-radius:3px;
  transition:background .12s, box-shadow .12s;
  -webkit-user-modify:read-write-plaintext-only;
}
.doc-sheet .fill.is-empty::before {
  content:attr(data-ph);
  color:var(--ds-faint);
  font-style:italic;
  pointer-events:none;
}

/* On-screen affordance: a soft tinted field with an underline. */
@media screen {
  .doc-sheet .fill {
    background:color-mix(in srgb, var(--ds-accent) 6%, transparent);
    box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--ds-accent) 32%, transparent);
    padding:0 .2em;
  }
  .doc-sheet .fill:hover { background:color-mix(in srgb, var(--ds-accent) 11%, transparent); }
  .doc-sheet .fill:focus { background:#fff; box-shadow:0 0 0 2px var(--ds-accent); }
}

/* Block-level fills (paragraphs, notes, list items) grow with content. */
.doc-sheet p.fill,
.doc-sheet div.fill {
  display:block;
  min-height:1.55em;
  padding:.28em .45em;
}
.doc-sheet li.fill { padding:.05em .3em; }

/* Crest monogram — editable single character on the accent chip. */
.doc-sheet .doc-crest.fill {
  background:var(--ds-accent);
  color:#fff;
  box-shadow:none;
}
.doc-sheet .doc-crest.fill.is-empty::before {
  content:attr(data-ph);
  color:rgba(255,255,255,.7);
  font-style:normal;
}
@media screen {
  .doc-sheet .doc-crest.fill:hover { background:var(--ds-accent); filter:brightness(1.05); }
  .doc-sheet .doc-crest.fill:focus { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ds-accent); }
}

/* Classification stamp stays inside its bordered box while editable. */
.doc-sheet .doc-classification.fill { min-width:6.5em; text-align:center; }
@media screen {
  .doc-sheet .doc-classification.fill {
    background:color-mix(in srgb, var(--ds-accent) 6%, transparent);
    box-shadow:none;
  }
  .doc-sheet .doc-classification.fill:focus { background:#fff; box-shadow:0 0 0 2px var(--ds-accent); }
}

/* ---- Print: clean document; blanks become writable rules ------------- */
@media print {
  .doc-sheet .fill {
    background:none !important;
    box-shadow:none !important;
    padding:0 !important;
  }
  .doc-sheet .fill.is-empty::before { content:""; }      /* drop the hint */
  /* Empty inline fields print as a line you can write on. */
  .doc-sheet span.fill.is-empty {
    display:inline-block;
    min-width:8em;
    box-shadow:inset 0 -1px 0 #9a968c !important;
  }
  .doc-sheet .doc-crest.fill { background:var(--ds-accent) !important; }
  .doc-sheet .doc-classification.fill { box-shadow:none !important; }
  .doc-sheet p.fill.is-empty,
  .doc-sheet div.fill.is-empty { min-height:1.4em; border-bottom:1px solid #cdc9bf; }
}

/* ---- Toolbar helpers ------------------------------------------------- */
.tpl-hint {
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:var(--text-sm); color:var(--color-text-muted); line-height:1.5;
  max-width:64ch; margin:0 auto var(--space-6);
}
.tpl-hint .ic { color:var(--color-primary); flex-shrink:0; margin-top:1px; }
.tpl-hint .ic svg { width:18px; height:18px; display:block; }