/* Apple original: Ext-Mod-Cons/Modifiers.swift and Assets.xcassets/Colors
   Fonts, colours and shared text styles. Sizes are written in iPad points (1 CSS px = 1 pt)
   and the whole app is then drawn at --scale, as macOS draws the Catalyst app at 77% of
   its iPad size. Barney 2026-10-16: everything smaller, "more spacious and finer detail".
   To make everything larger or smaller, change --scale only.

   Every font is shipped with the web app. Windows has none of Apple's fonts, and Apple's San
   Francisco may not be served to other systems, so plain text uses Roboto (the Android twin,
   already in the Apple app's Fonts folder). That way every browser, Mac or Windows, shows
   the same letters. */

/* The fonts as WOFF2, trimmed to the Latin alphabets, punctuation and symbols the app uses (2026-10-18: 7 MB -> 0.4 MB, the
   Gothic A1 files carried the whole Korean alphabet). Made from the apps' own .ttf files (YachtForms/Fonts) with fonttools:
   Roboto keeps its full weight range (only the width axis fixed at 100). A character outside them falls back to the system's. */
@font-face { font-family: "Roboto"; src: url("../Fonts/Roboto.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "GothicA1"; src: url("../Fonts/GothicA1-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "GothicA1"; src: url("../Fonts/GothicA1-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "ArchitectsDaughter"; src: url("../Fonts/ArchitectsDaughter.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Herbert"; src: url("../Fonts/herbert.woff2") format("woff2"); font-display: block; }

:root {
  /* Assets.xcassets/Colors (light appearance) */
  --gold: rgb(170, 150, 0);
  --charcoal: rgb(35, 40, 40);
  --textCharcoal: rgb(15, 20, 20);
  --titanium: rgb(160, 160, 150);
  --transtitanium: rgba(160, 160, 150, 0.296);
  --pen: rgb(21, 46, 100);
  --roeg: rgb(140, 10, 10);
  /* The user's highlight colour (Settings/ColorManager.swift) - gold until Settings exist */
  --highlight: var(--gold);
  /* UIKit system colours */
  --systemBackground: #ffffff;
  --label: #000000;
  --systemGray2: rgb(174, 174, 178);

  --scale: 0.77;
  --ui: "Roboto", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* Drawn at full iPad size, then scaled to fit the window. A transform, not CSS zoom: browsers
   still disagree on how zoom treats heights, a transform is the same everywhere. */
#app {
  position: absolute; left: 0; top: 0;
  width: calc(100vw / var(--scale));
  height: calc(100vh / var(--scale));
  transform: scale(var(--scale));
  transform-origin: 0 0;
  overflow: auto;
}
body {
  background: var(--systemBackground);
  color: var(--label);
  font-family: var(--ui);
  font-size: 17px;            /* UIKit body */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
input { font: inherit; }

/* textButtonStyle(): 22 light, tracking 1.05. Roboto's capitals run wider than Apple's, so Apple's
   tracking overshoots: with none, ENTER is the Mac's width (measured 2026-10-16). */
.textButtonStyle { font-size: 22px; font-weight: 300; letter-spacing: 0; line-height: 26px; }
/* saveButtonStyle(): the same in the highlight colour */
.saveButtonStyle { font-size: 22px; font-weight: 300; letter-spacing: 0; line-height: 26px; color: var(--highlight); }