/* Kaliputih Resto — deliberate deviations from the vendored design system.
 *
 * THE RULE: nothing in assets/brand/ is ever edited. It is a byte-for-byte copy of the
 * design project, so a future re-sync is a clean diff. Every deviation this app needs
 * lives in THIS file, with a comment saying why. Loaded after components.css, before
 * app.css.
 *
 * Re-sync procedure and the vendored file list: docs/design-system.md
 */

/* 1. iOS Safari zooms the viewport whenever a focused input is under 16px, and the jump
      does not undo itself — on a phone-first tool used standing up in a restaurant that
      is genuinely unusable. The design system's .kp-input is 15px (and --sm is 14px).
      16px is a floor here, never a preference. The old inline CSS had the same rule with
      the same comment; this is not new caution. */
.kp-input,
.kp-input--sm,
.kp-input--lg { font-size: 16px; }

/* 2. --font-secondary is "Copperplate" in the system and drives every button, field
      label, badge and tab. Copperplate is an engraved display face: at the 11-13px this
      UI sets it, it is hard to read, and we do not ship the font anyway (tokens/fonts.css
      is deliberately not vendored — see public/kp-fonts.css). The brand's actual signal is
      the WIDE TRACKING on small caps, which any face reproduces. invoice/brand.mjs made
      the identical call for the printed documents. */
:root { --font-secondary: var(--font-body); }

/* 3. The dish <select>s are emitted bare from JS as `<select class="seg-item">` with no
      wrapper element, so the system's sibling .kp-select__caret has nothing to anchor to.
      Draw the caret on the element itself instead. */
.kp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b1b60' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.kp-select__caret { display: none; }

/* 4. tokens/base.css gives every <a> a `border-bottom:1px solid currentColor`, which is
      right for prose links and wrong for anchors shaped like buttons.
      .wa / .wa.tpl are deliberately NOT listed. app.css gives .wa a full `border`
      shorthand, which already resets all four sides — and listing `.wa.tpl` here was a
      bug: at (0,2,0) it outranked app.css's `.wa` (0,1,0), so specificity beat source
      order and zeroed the bottom border of every outlined template button. They rendered
      as a pill open across the bottom, which is exactly how it was reported: "button
      bottom looks cut". Adding a selector to this list can therefore SUBTRACT a border
      the component wanted — check specificity against app.css before extending it. */
a.kp-btn,
.backlink,
.toc a { border-bottom: 0; }

/* 5. .kp-nav is authored for desktop: 76px tall with 48px (--gutter-desktop) side padding.
      At 375px that leaves 279px for the logo, the role chip and two links. */
@media (max-width: 700px) {
  .kp-nav {
    height: 60px;
    padding: 0 var(--gutter-mobile);
    gap: var(--space-4);
  }
}

/* 6. .kp-tabs--pill tabs compute to about 35px tall. The system sets --tap-min:44px for
      exactly this kind of tool ("comfortable for on-coach thumbs"); its own tab component
      does not meet it. */
.kp-tab { min-height: var(--tap-min); }

/* 7. `.kp-tab:hover` (0,2,0) outranks `.kp-tab--active` (0,1,0), so hovering the tab you
      are already on repaints its label navy while the rule under it stays rust — the
      selected tab briefly reads as unselected, against the component's own spec ("the
      active tab is rust with a 2px rust rule"). Hover is a hint about where you would go;
      it should not apply to where you already are. */
.kp-tab--active:hover { color: var(--kp-rust); }