/* ==========================================================================
   /dc/sample/scanner.css — page-scoped styles for the paperwork scanner card
   and the matched-sheet chip.

   A lift of /dc/r/5ftvyu9ograb/scanner.css. The one deliberate difference is
   the width cap: that set's menu indexes three sheets on a 1180px grid, this
   one indexes two on a 900px grid, so `.dcs-card` and `.dcs-matched` take
   900px and the card, the two sheets and the closing note share one edge.
   Every other declaration is untouched.

   SCOPE. Loaded by the four sample menu pages of this set and by nothing
   else. Every selector is prefixed `.dcs-` so no rule here can reach any
   other page, and no rule here restyles a shipped class: the chip is added
   as an extra element inside a shipped `.card`, it does not repaint one.

   COLOUR. Every colour is a token from assets/styles.css:8-33 —
   --paper, --navy, --navy-deep, --gold, --gold-deep, --cream, --cream-2,
   --muted, --ink — and nothing here introduces a literal. The card is the
   shipped card recipe: --paper field, 3px --navy edge, the hard --shadow
   offset, sitting on the --sky menu band so it stands off the field exactly
   as the two sheet cards below it do. Every button is the shipped gold CTA
   recipe: --gold field, --navy text, 3px --navy edge, hard --shadow-sm.

   SPECIFICITY. Every selector is one class, (0,1,0), or one class plus a
   state/attribute on its own element. The stylesheet is linked after
   /assets/styles.css and after each page's own <style> block, so where a
   shipped rule and a rule here could both match the same element the cascade
   is decided by source order. Nothing here is written as !important.

   DIRECTION. Layout is logical properties only — margin-inline,
   padding-inline, border-inline, inset-inline, flex and grid flow — so the
   Hebrew page mirrors under its inherited dir="rtl" with no correction
   block and no per-direction rule.

   The file-choice line under the photo button and the share row at the foot
   of the card follow both rules: tokens only, logical properties only.

   The DESIGN RULE at styles.css:49 still holds: flat fills, hard offsets,
   no gradient, no texture, no blur.
   ========================================================================== */

/* ------------------------------------------------------- the card === */
.dcs-card {
  background: var(--paper);
  border: var(--border) solid var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow);
  margin-block-end: clamp(1.4rem, 3vw, 2.1rem);
  max-width: 900px;
}

.dcs-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.15;
  color: var(--navy);
}

.dcs-intro {
  margin: 0 0 1rem;
  color: var(--ink);
}

/* The gold CTA recipe, at tap size. `min-height: 48px` is the same target the
   language pills hold at 375; the button keeps its own width and wraps rather
   than shrinking below it. */
.dcs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.72rem 1.3rem;
  border: var(--border) solid var(--navy);
  border-radius: 14px;
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dcs-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--navy);
}

.dcs-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--navy);
}

.dcs-btn[disabled] {
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-sm);
  opacity: 0.65;
}

/* ------------------------------- the capture controls, turned off === */
/* The photo control and the file-choice line are disabled at the markup:
   both are <button disabled> with no file input behind them. They inherit
   the established disabled weight from .dcs-btn[disabled] above — opacity
   0.65, no lift, no pointer — and this rule drops the gold CTA fill for the
   inactive --cream-2 ground, so the card stops offering them as the way in.
   Hover and active are named explicitly rather than left to source order:
   the copy must not move or light up under a finger. Nothing here touches
   the shared recipe, which the hit rows still use unchanged. */
.dcs-btn[data-dcs-shoot][disabled],
.dcs-btn[data-dcs-shoot][disabled]:hover,
.dcs-btn[data-dcs-shoot][disabled]:active,
.dcs-btn[data-dcs-shoot][disabled]:focus-visible {
  background: var(--cream-2);
  color: var(--ink);
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-sm);
  outline: none;
}

/* The photo control is one <label> for one <input type="file">: no script is
   needed to open the camera, so the button works the moment the markup
   parses and the script only has to notice the tap. */
.dcs-shootrow {
  margin: 0;
}

/* ------------------------------------------- the file-choice control === */
/* The second way in, for a photograph already on the phone or a PDF the
   hospital e-mailed. It is deliberately not a second gold CTA: one photo
   button is the instruction, and this is the alternative underneath it. So
   it takes the quiet recipe — no field, no shadow, --navy text on the card's
   own --paper, underlined so it reads as a control rather than a sentence —
   while still holding the same 48px tap target the gold button holds.

   The row's own margin is direction-neutral (nothing on either inline side)
   and the label's padding is written with logical properties, so the line
   starts from the same edge as the text above it under both directions. */
.dcs-pickrow {
  margin: 0.55rem 0 0;
}

.dcs-pick {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-block: 0.35rem;
  padding-inline: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  cursor: pointer;
  background: none;
  border: 0;
  text-align: start;
}

.dcs-pick:hover {
  color: var(--navy-deep);
}

.dcs-pick[disabled],
.dcs-pick[disabled]:hover,
.dcs-pick[disabled]:active,
.dcs-pick[disabled]:focus-visible {
  color: var(--ink);
  cursor: default;
  opacity: 0.65;
  outline: none;
}

.dcs-privacy {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.dcs-status {
  margin: 0.85rem 0 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.dcs-status:empty {
  display: none;
}

/* ------------------------------------------ the appointment results === */
.dcs-group {
  margin-block-start: clamp(1rem, 2.4vw, 1.4rem);
  padding-block-start: 1rem;
  border-block-start: 2px solid var(--navy);
}

.dcs-grouphead {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
}

.dcs-hits {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dcs-hit {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 14px;
}

.dcs-hit__pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.dcs-hit__box {
  inline-size: 22px;
  block-size: 22px;
  flex: 0 0 auto;
  accent-color: var(--navy);
  cursor: pointer;
}

.dcs-hit__src {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.dcs-hit__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--ink);
}

/* ------------------------------------------------ the manual picker === */
/* Lifted verbatim from the private set's stylesheet
   (dc/r/5ftvyu9ograb/scanner.css:263-436), where this shipped and was
   confirmed on a device. Only the line citations below are re-pointed at this
   file; not one declaration differs.

   The date and time controls stop exactly where the rest of the card's
   content stops, and they are held there by the structure they sit in rather
   than by a width on the control itself.

   WHAT ESTABLISHES THE MARGIN. `.dcs-card` sets one inline padding —
   `clamp(1.3rem, 1rem + 1vw, 1.9rem)` at line 47 — and every other thing in
   the card is a block-level box with no inline margin of its own, so the
   heading, the intro paragraph, the privacy line, the rule above this block
   and the keep-this-page panel all begin at the card's content-box start edge
   and end at its end edge. That one padding is the common margin. Nothing
   below sets a margin of its own; it makes the picker resolve against that
   same content box.

   WHY A WIDTH ON THE INPUT WAS NEVER ENOUGH. Two earlier passes sized the
   control — `inline-size: 100%` with `box-sizing: border-box` — and trusted
   the box model to hold it. On iOS Safari it does not. A native date or time
   control is laid out from its own control box: WebKit sizes that box from
   the value the control has to display, and treats the result as a minimum.
   CSS resolves a used inline size, clamps it by the maximum, and only then
   clamps it by the minimum — the minimum is applied last, so it wins. A
   `max-inline-size` can therefore never hold a control whose own minimum is
   wider than the row, however specific the selector that sets it, which is
   why the element measures correct in an inspector and still runs to the
   card's border on the phone.

   Four passes capped the boxes around the control and left the control
   itself alone. So the control is dealt with first now, and the four layers
   are kept only as containment behind it:

     0. THE CONTROL GIVES UP ITS OWN BOX. `appearance: none` — with the
        `-webkit-` prefix stated first, because iOS is the engine this is
        for — replaces the native control object with an ordinary CSS box.
        There is then no intrinsic minimum left for the cascade to lose to,
        and the `inline-size: 100%` and `min-inline-size: 0` already on the
        rule are what size the control. This is the declaration that fixes
        the overflow; 1 to 4 below never could, because every one of them
        constrains something other than the control.

        De-chroming also hands the value area back to CSS. WebKit centres it
        and leaves it sized to its own content, so the rule below pins it to
        the start edge — `start` rather than `left`, so the Hebrew page
        mirrors it along with everything else.

     1. THE CONTAINER takes the card's own horizontal bounds. It is pinned to
        its containing block — the same block the heading resolves against —
        with an explicit `inline-size`, a matching ceiling, no inline margin
        and no inline padding, so its content box and the card's content box
        are one rectangle. `min-inline-size: 0` stops the min-content
        contribution of the native controls inside it from widening that
        rectangle.

     2. THE FIELD WRAPPERS may not exceed it. `max-inline-size: 100%` resolves
        against the container's content box, and `min-inline-size: 0` removes
        the automatic minimum a flex item otherwise takes from its min-content
        width — on Safari that minimum is wider than the row. The inner track
        is capped with `minmax(0, 1fr)` for the same reason, so the grid area
        the input stretches into can never be wider than the wrapper.

     3. THE INPUTS may not exceed their wrapper. `max-inline-size: 100%` is a
        ceiling tied to the wrapper's content box, and `box-sizing:
        border-box` is stated on the element that carries the 2px edge and the
        0.7rem inline padding, so that ceiling counts them inside rather than
        letting them be added on top of it. This bounds the box; on its own
        it never bounded the control, which is what layer 0 is for.

     4. THE GUARD. `overflow-x: clip` on the container clips anything that
        still paints past the content edge back to that edge instead of
        letting it paint over the card. This is the layer that does not ask
        the engine to agree about a width. It is `overflow-x` and not
        `overflow` on purpose: the shipped focus indicator is a hard 4px gold
        offset shadow (assets/styles.css:1444-1450, which also removes the
        outline), and clipping the block axis would take it with it, so only
        the inline axis is clipped and the indicator stays visible under the
        focused control. `clip` rather than `hidden` because `hidden` cannot
        be paired with a visible block axis and would turn the row into a
        scroll container.

        Known cost, unchanged by this pass: the input's end edge sits exactly
        on the clip edge, so the 4px the shadow is offset along the inline
        axis is clipped with it. The indicator reads as an L down the start
        edge and along the bottom rather than a full offset. Dropping this
        layer would restore it, but it is the only thing standing behind
        layer 0 on an engine that supports `overflow: clip`, so it stays
        until layer 0 has been confirmed on a device.

   Layer 0 and layers 1 to 4 all apply at every width, not only under the
   phone media query below, so a landscape phone wider than 520px is held by
   the same bounds.

   The input rule needs a descendant selector — the only one in this file —
   because `.dcs-input` is also the class the hit rows give their time
   control, and nothing here should reach that.

   Type, colour, border weight, height, internal padding and font size are
   untouched throughout: these rules set inline bounds, the box those bounds
   resolve against, and — in layer 0 — whether the control has a box of its
   own to argue with. The 48px tap target at line 407 and the 1rem font
   size at line 414 that keeps iOS from zooming the page on focus both
   survive `appearance: none` unchanged. */
.dcs-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block-end: 0.9rem;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline: 0;
  padding-inline: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.dcs-field {
  display: grid;
  gap: 0.3rem;
  flex: 1 1 9rem;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.dcs-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--navy);
}

.dcs-input {
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--navy);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
}

.dcs-field .dcs-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.dcs-field .dcs-input::-webkit-date-and-time-value {
  text-align: start;
}

/* Below 520px each field takes a whole row of its own, at the container's
   full content width, with the block's own `gap` between them.

   This is an explicit basis, not a wrap. `flex: 0 0 100%` sizes each item to
   the container's content width outright, so two of them can never share a
   line and neither can be laid out from the intrinsic width of the native
   control inside it. That distinction is the whole point: Chrome already wraps
   this pair at phone width, but Safari sizes native date and time controls
   wider and does not shrink them the same way, so a layout that depends on
   wrapping collides there — the two fields sit side by side with their borders
   touching and the time field runs past the card's right edge. The bounds that
   keep each row inside the card are the four layers above, which are not
   conditional on this query. */
@media (max-width: 519.98px) {
  .dcs-field {
    flex: 0 0 100%;
  }
}
}

.dcs-done {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--cream-2);
  border: 2px solid var(--navy);
  border-radius: 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.dcs-done:empty {
  display: none;
}

/* -------------------------------------------- the matched-sheet chip === */
/* The heading sits between the scanner card and the sheet index, on the
   --sky band, so it takes --navy rather than --muted for the same reason
   .dc-menuband re-points .lede. */
.dcs-matched {
  margin: 0 0 0.9rem;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  color: var(--navy);
}

/* A small gold pill with navy text, added inside the matching sheet card
   above its heading. --navy on --gold is 9.83:1. */
.dcs-chip {
  align-self: flex-start;
  display: inline-block;
  margin-block-end: 0.4rem;
  padding: 0.25rem 0.7rem;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* ---------------------------------------------------- the share row === */
/* The last thing in the card, and the smallest. It is secondary to the photo
   button by construction: a --cream panel instead of the card's --paper, a
   2px edge where the card takes 3px, no offset shadow on the panel, a
   heading at body size rather than the .dcs-title clamp, and a button on
   --paper with --navy text — the quiet inverse of the gold CTA above it, so
   the two can never be mistaken for each other at a glance.

   Every value is a token from assets/styles.css:8-33: --cream, --paper,
   --navy, --ink, --cream-2. Nothing here is a literal and nothing here is a
   gradient, a texture or a blur — the DESIGN RULE at styles.css:49 holds.

   Direction: margin-block, padding-block, padding-inline and the flex flow
   are all logical, so the panel mirrors under the Hebrew page's dir="rtl"
   with no per-direction rule. */
.dcs-share {
  margin-block-start: clamp(1rem, 2.4vw, 1.4rem);
  padding: 0.9rem 1rem;
  background: var(--cream);
  border: 2px solid var(--navy);
  border-radius: 14px;
}

.dcs-share__head {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--navy);
}

.dcs-share__body {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* The quiet inverse of .dcs-btn: same geometry and same 48px target, --paper
   field instead of --gold. */
.dcs-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  background: var(--paper);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dcs-share__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--navy);
}

.dcs-share__btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--navy);
}

.dcs-share__done {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--cream-2);
  border: 2px solid var(--navy);
  border-radius: 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
}

.dcs-share__done:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .dcs-btn,
  .dcs-btn:hover,
  .dcs-btn:active,
  .dcs-share__btn,
  .dcs-share__btn:hover,
  .dcs-share__btn:active {
    transform: none;
    transition: none;
  }
}