/* create.html: the dialogs and the two full-screen overlays.

   1  the card reveal (#creation-overlay) and the send overlay (#send-overlay): the world dims, a postcard
      comes forward, a cream caption strip says what is happening, like the card in focus on the home page
   2  the "teach it your handwriting" dialog (js/handwritingCapture.js builds its screens, so these are
      styled by class) and the little draw/fix pad on top of it
   3  the fonts window and the postmark window (<dialog>s) */

/* ================================================================== 1. THE REVEAL AND THE SEND */
/* theme.css paints these cream; funnel.css (!important) takes away the blur. Dim the countryside instead. */
.creation-overlay, .send-overlay {
  background: var(--scrim) !important;
  -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important;
}
.creation-stage { max-width: min(640px, 100%); }
.creation-overlay .postcard-face, .send-overlay .mail-half {
  background: var(--card-paper-2) !important; border: 0 !important; border-radius: 6px !important;
  box-shadow: 8px 8px 0 rgb(0 0 0 / .3) !important;
}
.postcard-face-back { outline: 0; }
/* the pen's tip: a flat dot, no glow */
.anim-msg-wrap .stroke-nib { filter: none; fill: var(--terra); }

/* the caption strip under the card: cream, with the progress rule along its bottom edge */
.creation-overlay #creation-status, .send-overlay .send-status {
  display: block; width: fit-content; max-width: 100%; min-width: min(20rem, 100%); margin: 2.1rem auto .9rem; padding: 12px 22px 15px;
  background: var(--cream); border-radius: 10px; box-shadow: 5px 5px 0 rgb(0 0 0 / .26);
  font: 700 .9375rem/1.3 var(--font-ui); color: var(--ink) !important; overflow: hidden;
}
.creation-overlay #creation-status::before, .creation-overlay #creation-status::after { height: 5px; }
.creation-overlay #creation-status::before { background: rgb(var(--ink-rgb) / .14); }
.creation-overlay #creation-status::after { background: var(--terra); }
.creation-overlay #creation-skip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px;
  background: var(--cream-2); color: var(--terra-deep) !important; font: 700 .9375rem var(--font-ui);
  text-decoration: none; box-shadow: 0 4px 0 rgb(0 0 0 / .3);
}
.creation-overlay #creation-skip:hover { background: var(--cream-hi); text-decoration: none; }
.creation-overlay #creation-skip:active { transform: translateY(4px); box-shadow: none; }

/* the stamp and the postmark on the card: flat colours, no soft shadow */
.anim-stamp svg, .mail-stamp svg { display: block; filter: none; }
.anim-stamp, .mail-stamp { filter: none !important; }
.mail-stamp { color: var(--terra) !important; }
.mail-postmark, .anim-postmark { font-family: var(--font-ui); font-weight: 700; }

/* sending: the two halves, the stamp, the pigeon that takes it away */
.send-stage { max-width: min(560px, 100%); }
.send-overlay .send-status { margin-top: 2.4rem; }
.mail-pigeon { width: 38%; height: auto; left: -20%; top: 20%; color: var(--ink); }
img.mail-pigeon { filter: none; }

/* "on its way": a cream card, the pigeon on top */
.send-result { max-width: 460px; padding: 30px clamp(22px, 4vw, 40px) 34px; text-align: center; }
.send-result .send-done-mark { display: block; width: 92px; height: 72px; margin: 0 auto .9rem; color: inherit; }
.send-result h2 { font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.05rem)/1.12 var(--font-heading); margin: 0 0 .5rem; color: var(--ink) !important; }
.send-done-sub { font: 400 1.125rem/1.4 var(--font-body); color: var(--ink-dim) !important; margin: 0 0 .5rem; }
.send-done-meta { font: 700 .8125rem/1.4 var(--font-ui); color: var(--ink-faint) !important; margin: 0 0 1.6rem; }
.send-done-actions { gap: .9rem; }

@media (max-width: 559px) {
  .creation-overlay, .send-overlay { padding: 1.25rem 1rem; }
  .creation-overlay #creation-status, .send-overlay .send-status { margin-top: 1.5rem; padding: 10px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .creation-overlay, .send-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ================================================================== 2. TEACH IT YOUR HANDWRITING */
.hw-capture-overlay { z-index: 120; }
.hw-shell { max-width: 780px; }
@media (min-width: 640px) { .hw-shell { max-height: calc(100vh - 2.5rem); } }
@media (max-width: 639px) { .hw-shell { border-radius: 0 !important; box-shadow: none !important; } }
.hw-head { padding-right: 4rem; }
.hw-head h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); margin: 0; }
.hw-sub { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); margin-top: .35rem; }
.hw-x { top: calc(env(safe-area-inset-top, 0px) + .75rem); right: .75rem; font: 400 1.4rem/1 var(--font-ui); box-shadow: 0 3px 0 rgb(var(--shade-rgb) / .3); }
.hw-x:hover { background: var(--cream-hi); color: var(--terra-deep); border-color: var(--terra); }
.hw-body { padding: 1.3rem 1.5rem; }
.hw-foot { padding: .95rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + .95rem); gap: .6rem 1rem; }
.hw-foot .btn-ghost, .hw-foot .link-btn { color: var(--ink-dim) !important; }
.hw-foot .link-btn { color: var(--terra-deep) !important; }
.hw-foot .btn-primary { min-height: 48px; padding-inline: 26px; }
.hw-steps { margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: hw; gap: .7rem; font: 400 1.0625rem/1.4 var(--font-body); color: var(--ink); }
.hw-steps li { counter-increment: hw; position: relative; padding-left: 40px; }
.hw-steps li::before {
  content: counter(hw); position: absolute; left: 0; top: .05em; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .875rem var(--font-ui); background: var(--terra); color: var(--btn-on); box-shadow: 0 2px 0 var(--terra-deep);
}

/* capture: the sentence to copy is a strip of paper */
.hw-pangram-sample {
  margin: .2rem 0; padding: 18px 20px; text-align: center; border-radius: 10px;
  font: 400 clamp(1.15rem, 1rem + .8vw, 1.5rem)/1.45 var(--font-heading); color: var(--ink);
  background: var(--cream-2); border: 2px solid rgb(var(--ink-rgb) / .28); box-shadow: 3px 3px 0 var(--edge);
}
.hw-capture-status, .hw-align-status, .hw-rotate-warn, .sig-warn { color: var(--flag); font: 700 .875rem/1.35 var(--font-ui); }
.hw-capture-row .btn-primary { min-height: 52px; padding-inline: 28px; }
.hw-capture-row .btn-ghost { color: var(--ink-dim) !important; }
.hw-progress-track { height: 12px; border-radius: 6px; background: var(--paper-sunken); border: 2px solid rgb(var(--ink-rgb) / .4); }
.hw-progress-fill { background: var(--terra); }
.hw-progress-label { font: 700 .8125rem var(--font-ui); color: var(--ink-dim); }
.hw-review summary { font: 700 .9375rem var(--font-ui); color: var(--ink); padding: .5rem 0; min-height: 44px; display: flex; align-items: center; }
.hw-review summary::before { color: var(--terra); margin-right: .45em; }
.hw-status { font: 700 .9375rem var(--font-ui); color: var(--ink-dim); }
.hw-build-tile { border: 2px solid rgb(var(--ink-rgb) / .22); background: var(--paper-sunken); border-radius: 6px; }

/* the photo and its crop */
.hw-align-wrap, .hw-crop-stage { border-radius: 8px; background: var(--paper-sunken); outline: 2px solid rgb(var(--ink-rgb) / .4); box-shadow: 5px 5px 0 var(--edge); }
.hw-body-align { padding: 1rem 1.25rem; gap: .7rem; }
.hw-photo-ctrls { gap: .6rem 1.2rem; }
.hw-photo-ctrls .link-btn { min-height: 40px; display: inline-flex; align-items: center; }
.hw-tilt { font: 700 .8125rem var(--font-ui); color: var(--ink); gap: .8rem; }
.hw-tilt input[type="range"]::-webkit-slider-runnable-track { background: rgb(var(--ink-rgb) / .22); height: 6px; border: 0; }
.hw-tilt input[type="range"]::-moz-range-track { background: rgb(var(--ink-rgb) / .22); height: 6px; border: 0; }
.hw-tilt input[type="range"] { accent-color: rgb(var(--ink-rgb) / .22); }
.hw-tilt-val { color: var(--ink-dim); font-weight: 500; }
/* the guide lines read on a dark photo and on pale paper: a blue dash with a cream edge under it */
.hw-align-line { border-top: 2px dashed rgb(31 47 87 / .7); box-shadow: 0 1px 0 color-mix(in srgb, var(--card-paper-2) 70%, transparent); }
.hw-align-line.hw-align-x { border-top-style: dotted; border-top-color: rgb(31 47 87 / .5); }
.hw-align-label { font: 700 .6875rem var(--font-ui); border-radius: 4px; color: var(--card-paper); background: var(--blue); }

/* the grid of letters (review, and the "review letters" fold-out) */
.hw-strip { gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.hw-cell { padding: .3rem .25rem .35rem; border-radius: 8px !important; box-shadow: 2px 2px 0 var(--edge) !important; }
.hw-cell:hover { border-color: var(--terra) !important; }
.hw-cell.is-focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.hw-cell.is-ok { box-shadow: 2px 2px 0 var(--edge), inset 0 -4px 0 var(--sage) !important; }
.hw-cell.is-warn { box-shadow: 2px 2px 0 var(--edge), inset 0 -4px 0 var(--flag) !important; }
.hw-cell-ch { font: 700 .75rem var(--font-ui); color: var(--ink-dim); }
.hw-cell-prev { color: var(--ink-faint); }
.hw-cell .link-btn { font: 700 .6875rem var(--font-ui); color: var(--flag) !important; }
.hw-hint-ch { font-family: var(--font-heading); font-weight: 400; color: var(--terra-deep); }

/* the finished hand */
.hw-done-sample { background: var(--card-paper-2); border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 10px; box-shadow: 3px 3px 0 var(--edge); }
.hw-done-sample svg { color: var(--card-ink); }

/* the draw / fix pad (a smaller card above the dialog) */
.hw-pad-overlay { background: var(--scrim) !important; }
.hw-pad { max-width: 540px; padding: 1.4rem 1.5rem 1.3rem; }
.hw-pad h3 { font: 400 1.5rem/1.15 var(--font-heading); }
.hw-pad-canvas-wrap { border-radius: 8px; outline: 2px solid rgb(var(--ink-rgb) / .4); box-shadow: none; }
.hw-pad-canvas { background: var(--card-paper-2); }
.hw-pad-row { gap: .8rem; flex-wrap: wrap; }
.hw-pad-row .btn-primary { min-height: 48px; }
.hw-pad-row .btn-ghost, .hw-pad-row .link-btn { color: var(--ink-dim) !important; }
.hw-pad-row .link-btn { color: var(--terra-deep) !important; }

/* ================================================================== 3. FONTS WINDOW, POSTMARK WINDOW */
.font-dialog-head, .pm-head { padding: 1.2rem 1.25rem .9rem 1.6rem; }
.font-dialog-body { padding: .8rem 1.6rem 1.8rem; }
.font-dialog-section { font: 400 1.2rem/1.2 var(--font-heading); color: var(--ink); margin: 1.5rem 0 .8rem; }
.font-dialog-section:first-child { margin-top: .5rem; }
.custom-font-panel { padding: 16px; background: var(--paper-sunken); border: 2px dashed rgb(var(--ink-rgb) / .25); border-radius: 10px; }
.custom-font-status { font: 700 .875rem var(--font-ui); color: var(--terra-deep); }
.custom-font-preview { background: var(--card-paper-2) !important; border: 2px solid rgb(var(--ink-rgb) / .28); border-radius: 8px; }
.custom-font-preview svg { color: var(--card-ink); }
.postmark-row { gap: .6rem 1.2rem; }
.pm-thumb { border: 2px solid rgb(var(--ink-rgb) / .35); border-radius: 6px; box-shadow: 2px 2px 0 var(--edge); }
.postmark-chosen-name { font: 700 1rem var(--font-ui); }
/* a plain list; the chosen row is the terracotta one */
.pm-item span { font: 700 .9375rem var(--font-ui); border-radius: 8px; background: none; border-color: transparent; box-shadow: none; }
.pm-item:hover span { background: var(--paper-sunken); border-color: transparent; }
.pm-item input:checked + span { background: var(--terra); border-color: var(--terra); box-shadow: 0 3px 0 var(--terra-deep); }
.pm-group-head { font: 700 .75rem var(--font-ui); letter-spacing: .08em; }
.pm-preview-pane { background: var(--paper-sunken); }
.pm-stage { border: 2px solid rgb(var(--ink-rgb) / .3); border-radius: 6px; box-shadow: 5px 5px 0 var(--edge); }
.pm-caption { font: 500 .9375rem var(--font-ui); }
.pm-caption strong { font: 400 1.2rem var(--font-heading); }
.pm-foot { border-top: 2px dotted rgb(var(--ink-rgb) / .28); }
@media (max-width: 619px) {
  .font-dialog, .postmark-dialog { border-radius: 14px 14px 0 0 !important; box-shadow: none !important; }
}