@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=JetBrains+Mono&display=swap');
/* look.css: Caligrafy's look, loaded by every Caligrafy page after the base stylesheets (styles.css, Bootstrap,
 * theme.css, tokens.css, layout.css, camera.css). Radical subtraction: a white canvas, light ash surfaces, no shadows,
 * no borders on cards, Caligrafy black for primary actions, two weights (400 and 500), 4px controls, 0.33s color
 * transitions, Inter type. A design style (DESIGN_STYLE, public/css/designs/<name>.css) is loaded after it and
 * restyles it; the tokens below (--design-*, then the --cq-* they feed) are the place to start. */

/* 1. Tokens ------------------------------------------------------------------------------------------------- */
:root {
  --design-canvas: #ffffff;          /* the page: pure white */
  --design-surface: #f4f4f4;         /* light ash: cards, sections, secondary buttons */
  --design-surface-raised: #ffffff;  /* fields and rows on an ash surface */
  --design-ink: #171a20;             /* carbon dark: headings, navigation, strong text */
  --design-body: #393c41;            /* graphite: body text */
  --design-muted: #5c5e62;           /* pewter: secondary text, links */
  --design-placeholder: #8e8e8e;     /* silver fog */
  --design-hairline: #e2e3e3;        /* the rare divider, between list rows */
  --design-hairline-strong: #d0d1d2; /* pale silver: control edges */
  --design-primary: #000000;         /* Caligrafy black: primary actions */
  --design-primary-hover: #333333;
  --design-on-primary: #ffffff;
  --design-error: #b3261e;
  --design-success: #1f7a4d;
  --design-focus: #171a20;
  --design-overlay: rgba(128, 128, 128, .65);
  --design-font: Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --design-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --design-radius-control: 4px;
  --design-radius-card: 12px;
  --design-transition: color .33s, background-color .33s, border-color .33s, box-shadow .25s;

  /* the Caligrafy tokens this style replaces (the page components read them) */
  --cq-color-ink: var(--design-ink);
  --cq-color-paper: var(--design-surface);
  --cq-color-page: var(--design-canvas);
  --cq-color-text: var(--design-body);
  --cq-color-text-muted: var(--design-muted);
  --cq-color-border: var(--design-hairline);
  --cq-color-accent-dark: var(--design-muted);
  --cq-color-accent-light: var(--design-surface);
  --cq-color-accent-red: var(--design-error);
  --cq-radius-control: var(--design-radius-control);
  /* the structure of Caligrafy's own pages (public/css/layout.css) */
  --cq-color-primary: var(--design-primary);
  --cq-color-primary-hover: var(--design-primary-hover);
  --cq-color-on-primary: var(--design-on-primary);
  --cq-color-surface: var(--design-surface);
  --cq-color-canvas: var(--design-canvas);
  --cq-radius-card: var(--design-radius-card);
}

/* 2. Layout: body, header, footer ---------------------------------------------------------------------------- */
html body { background-color: var(--design-canvas); color: var(--design-body); font-size: 14px; line-height: 1.43; }
html body * { font-family: var(--design-font); font-weight: 400; letter-spacing: normal; text-transform: none; }
html body h1, html body h2, html body h3, html body h4, html body h5 { font-weight: 500; color: var(--design-ink); letter-spacing: normal; }
html body .semibold, html body .semi-bold, html body strong, html body b, html body th { font-weight: 500; }
html body code, html body pre, html body kbd { font-family: var(--design-font-code); }
html body code { color: var(--design-ink); background: var(--design-surface); border-radius: var(--design-radius-control); padding: 1px 6px; font-size: .92em; }
html body header:not(.cq-camera-top), html body header.color0 {
  background-color: rgba(255, 255, 255, .75); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  color: var(--design-ink); border: 0; box-shadow: none;
}
html body header h1.large-text, html body header h1.large-text * { font-size: 20px; font-weight: 400; color: var(--design-ink); }
html body header h1.large-text .semibold { font-weight: 500; }
html body header #menu_icon li { width: 18px; height: 2px; padding: 0; margin: 0 .5em 5px; border: 0; background-color: var(--design-ink); }   /* three thin bars */
html body #vertical_menu, html body #vertical_menu .menulist { background-color: var(--design-canvas); box-shadow: none; }
html body #vertical_menu a { color: var(--design-ink); font-weight: 500; }
html body .shadowCoverTop { background-color: transparent; }
html body .radialShadowTop { display: none; }                   /* flat: no shadows anywhere */
html body footer:not(.cq-camera-bottom), html body footer:not(.cq-camera-bottom) * { color: var(--design-muted); background-color: var(--design-canvas); }
html body .color4, html body .content-section.color4 { background-color: var(--design-canvas); color: var(--design-body); }
html body .color0 { background-color: var(--design-canvas); color: var(--design-body); }
html body .textcolor5, html body .default-text.textcolor5 { color: var(--design-muted); }
html body a:not(.btn) { color: var(--design-muted); text-decoration: none; transition: var(--design-transition); }
html body a:not(.btn):hover { color: var(--design-ink); text-decoration: underline; text-underline-offset: 3px; }
html body .modal-backdrop.show { background-color: var(--design-overlay); opacity: 1; }

/* 3. Sign-in pages and Caligrafy cards: light ash, 12px, no shadow, no border -------------------------------- */
html body .card, html body .card.color0, html body .card-unbounded, html body .dropshadow {
  background-color: var(--design-surface); color: var(--design-body); border: 0; border-radius: var(--design-radius-card); box-shadow: none;
}
html body .card .medium-text { color: var(--design-ink); font-weight: 500; }
/* one surface per card: the white panels Caligrafy nests inside its cards take the card's ash */
html body .card .color0, html body .card .main-section, html body .card .maketransparent, html body .card-unbounded .color0 { background-color: transparent; }
html body .card-unbounded > h2 { font-size: 24px; font-weight: 500; color: var(--design-ink); }
/* line clamping draws a square in the page color over the end of the text: give it the card's color */
html body .block-with-text::before, html body .block-with-text::after { background: transparent; }
/* status badges: no semantic colors in this style, ink for the strong one, a white chip otherwise */
html body .badge { border-radius: var(--design-radius-control); font-weight: 500; padding: 4px 8px; }
html body .badge.bg-success, html body .badge.bg-primary, html body .badge.bg-dark { background-color: var(--design-ink) !important; color: var(--design-on-primary); }
html body .badge.bg-danger, html body .badge.bg-secondary, html body .badge.bg-warning, html body .badge.bg-light, html body .badge.bg-info { background-color: var(--design-surface-raised) !important; color: var(--design-body); }
html body .alert { border: 0; border-radius: var(--design-radius-control); background: var(--design-surface); color: var(--design-body); }
html body .alert-danger { color: var(--design-error); }
html body .alert-success { color: var(--design-success); }

/* 4. Controls: buttons and fields (Bootstrap reads its --bs-btn-* variables) ---------------------------------------- */
html body .btn {
  --bs-btn-border-radius: var(--design-radius-control);
  font-weight: 500; font-size: 14px; line-height: 1.2; height: auto; min-height: 40px; padding: 10px 24px;
  border-width: 3px; box-shadow: none; transition: var(--design-transition);
}
html body .btn-primary, html body .btn-primary.btn-secondary {   /* the sign-in button is btn-primary btn-secondary: the main action */
  --bs-btn-color: var(--design-on-primary); --bs-btn-bg: var(--design-primary); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--design-on-primary); --bs-btn-hover-bg: var(--design-primary-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--design-on-primary); --bs-btn-active-bg: var(--design-primary-hover); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--design-placeholder); --bs-btn-disabled-bg: var(--design-surface); --bs-btn-disabled-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 23, 26, 32;
  background-color: var(--bs-btn-bg); border-color: transparent; color: var(--bs-btn-color);
}
html body .btn-primary:hover, html body .btn-primary.btn-secondary:hover { background-color: var(--design-primary-hover); color: var(--design-on-primary); }
html body .btn-secondary:not(.btn-primary), html body .btn-outline-dark {
  --bs-btn-color: var(--design-body); --bs-btn-bg: var(--design-surface-raised); --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--design-ink); --bs-btn-hover-bg: var(--design-surface-raised); --bs-btn-hover-border-color: var(--design-hairline-strong);
  --bs-btn-active-color: var(--design-ink); --bs-btn-active-bg: var(--design-surface-raised); --bs-btn-active-border-color: var(--design-ink);
  --bs-btn-focus-shadow-rgb: 23, 26, 32;
  background-color: var(--bs-btn-bg); border-color: transparent; color: var(--bs-btn-color);
}
html body .btn-secondary:not(.btn-primary):hover, html body .btn-outline-dark:hover { border-color: var(--design-hairline-strong); color: var(--design-ink); }
html body .btn-outline-dark { --bs-btn-bg: transparent; background-color: transparent; border: 1px solid var(--design-hairline-strong); color: var(--design-ink); }
html body .btn-outline-dark:hover { background-color: var(--design-surface-raised); border-color: var(--design-ink); }
html body .btn-link, html body input.btn-link { --bs-btn-color: var(--design-muted); --bs-btn-hover-color: var(--design-ink); background: transparent; border-color: transparent; color: var(--design-muted); }
/* buttons side by side (credit packs, periods): flat buttons need air between them */
html body .cq-section > .btn, html body .cq-card > .btn, html body .cq-card form > .btn + .btn { margin: 0 8px 8px 0; }
/* the secondary button is light ash on the white canvas, white on an ash surface (cards, tiles, bands) */
html body.cq-site .btn-secondary:not(.btn-primary) { --bs-btn-bg: var(--design-surface); --bs-btn-hover-bg: #ececec; --bs-btn-active-bg: #e2e3e3; background-color: var(--design-surface); }
html body.cq-site .btn-secondary:not(.btn-primary):hover { background-color: #ececec; border-color: transparent; }
html body.cq-site .cq-band--surface .btn-secondary:not(.btn-primary), html body.cq-site .cq-stat .btn-secondary:not(.btn-primary), html body.cq-site .cq-tile .btn-secondary:not(.btn-primary) { --bs-btn-bg: var(--design-surface-raised); background-color: var(--design-surface-raised); }
html body .cq-page > .btn-secondary:not(.btn-primary), html body .content-section > .btn-secondary:not(.btn-primary) { --bs-btn-bg: var(--design-surface); background-color: var(--design-surface); }
html body a.btn-primary:link, html body a.btn-primary:visited { color: var(--design-on-primary); }
html body a.btn-secondary:link, html body a.btn-secondary:visited { color: var(--design-body); }
html body .btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--design-focus); }
html body .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--design-on-primary), 0 0 0 2px var(--design-primary); }

html body .form-control, html body .form-select, html body textarea {
  font-size: 14px; height: auto; min-height: 40px; padding: 9px 12px;
  background-color: var(--design-surface-raised); color: var(--design-ink);
  border: 1px solid var(--design-hairline-strong); border-radius: var(--design-radius-control); box-shadow: none;
  transition: var(--design-transition);
}
html body .form-control::placeholder, html body textarea::placeholder { color: var(--design-placeholder); opacity: 1; }
html body .form-control:focus, html body .form-select:focus, html body textarea:focus {
  border-color: var(--design-ink); box-shadow: inset 0 0 0 1px var(--design-ink); background-color: var(--design-surface-raised); outline: 0;
}
html body .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--design-surface-raised) inset; -webkit-text-fill-color: var(--design-ink); }
html body label { color: var(--design-body); font-weight: 500; font-size: 14px; }
html body .form-check-input { border-color: var(--design-hairline-strong); border-radius: var(--design-radius-control); }
html body .form-check-input:checked { background-color: var(--design-ink); border-color: var(--design-ink); }
html body .form-check-input:focus { box-shadow: 0 0 0 2px var(--design-surface), 0 0 0 3px var(--design-ink); border-color: var(--design-ink); }
html body table { color: var(--design-body); }
html body .table > :not(caption) > * > * { border-bottom-color: var(--design-hairline); background-color: transparent; color: var(--design-body); }
html body .table thead th { color: var(--design-ink); font-weight: 500; }
html body .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--design-surface-raised); background-color: var(--design-surface-raised); color: var(--design-ink); }

/* 5. Page components (tokens.css): .cq-page > .cq-card ... ---------------------------------------------------------- */
html body .cq-card { background: var(--design-surface); color: var(--design-body); border: 0; border-radius: var(--design-radius-card); box-shadow: none; }
html body .cq-card + .cq-card { margin-top: 16px; }
html body .cq-title { font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--design-ink); }
html body .cq-note { font-size: 14px; color: var(--design-muted); line-height: 1.43; }
html body .cq-note code, html body .cq-card code { background: var(--design-surface-raised); color: var(--design-body); font-size: 12px; border-radius: var(--design-radius-control); padding: 2px 6px; }
html body .cq-card pre { background: var(--design-surface-raised); color: var(--design-ink); border: 0; border-radius: var(--design-radius-control); padding: 12px 14px; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
html body .cq-form label { font-size: 14px; font-weight: 500; color: var(--design-body); }
html body .cq-card > pre { margin: 0 52px 16px; padding: 16px; text-align: center; font-size: 22px; letter-spacing: .12em; color: var(--design-ink); }   /* a code to compare (cloud login) */
html body .cq-error { color: var(--design-error); }
html body .cq-tabs { gap: 4px; padding: 8px 52px; border: 0; background: transparent; }
html body .cq-tabs button {
  flex: 0 1 auto; min-height: 32px; padding: 4px 16px; border: 0; border-radius: var(--design-radius-control);
  background: transparent; color: var(--design-ink); font-size: 14px; font-weight: 500; transition: var(--design-transition);
}
html body .cq-tabs button:hover { background: rgba(23, 26, 32, .05); }
html body .cq-tabs button.active { background: var(--design-surface-raised); color: var(--design-ink); border-bottom-color: transparent; }
html body .cq-tabs button:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--design-focus); }
html body .cq-count { background: var(--design-surface-raised); color: var(--design-body); }
html body .cq-tabs button.active .cq-count { background: var(--design-ink); color: var(--design-on-primary); }
html body .cq-item { border-bottom: 1px solid var(--design-hairline); transition: var(--design-transition); }
html body .cq-item:last-child { border-bottom: 0; }
html body .cq-item-title { font-size: 17px; font-weight: 500; color: var(--design-ink); }
html body .cq-item-title a, html body .cq-item-title a:not(.btn) { color: var(--design-ink); }
html body .cq-item-meta { color: var(--design-muted); }
html body .cq-item.is-done .cq-item-title { color: var(--design-placeholder); font-weight: 400; }
html body .cq-check.form-check-input { border-color: var(--design-muted); background-color: var(--design-surface-raised); }
html body .cq-check.form-check-input:checked { background-color: var(--design-ink); border-color: var(--design-ink); }
html body .cq-actions .btn { min-height: 32px; padding: 4px 16px; font-size: 14px; border-width: 1px; }
html body .cq-empty { color: var(--design-muted); }
html body .cq-foot { border-top: 0; background: transparent; color: var(--design-muted); font-size: 14px; }
html body .cq-section + .cq-section { border-top: 1px solid var(--design-hairline); }

/* 8. Caligrafy's own pages (public/css/layout.css): top bar, hero, bands, rows, tiles, account ----------------------- */
html body.cq-site { background: var(--design-canvas); }
html body .cq-nav { background: rgba(255, 255, 255, .75); }
html body a.cq-nav-brand, html body a.cq-nav-brand:hover { color: var(--design-ink); text-decoration: none; font-size: 17px; }
html body a.cq-nav-link, html body .cq-nav-link { color: var(--design-ink); font-weight: 500; text-decoration: none; }
html body a.cq-nav-link:hover, html body .cq-nav-link.is-active { background: rgba(23, 26, 32, .05); color: var(--design-ink); text-decoration: none; }
html body a.cq-tile, html body a.cq-tile:hover { color: var(--design-body); text-decoration: none; }
html body a.cq-tile:hover { background: #ececec; }
html body .cq-account-nav a, html body .cq-account-nav a:hover { color: var(--design-ink); text-decoration: none; }
html body .cq-row-title a { color: var(--design-ink); }
html body a.cq-back { color: var(--design-muted); }
html body .cq-display { font-weight: 500; letter-spacing: normal; }
html body .cq-lead { color: var(--design-muted); }
html body .cq-segments button.active { box-shadow: none; }
html body .cq-footer, html body .cq-footer * { background: transparent; }
html body .cq-badge { font-weight: 500; font-size: 12px; }

/* 7. Full-screen camera pages (public/css/camera.css: face detect, machine learning, face sign-in) -------------------- */
:root {
  --cq-camera-font: var(--design-font);
  --cq-camera-canvas: var(--design-ink);
  --cq-camera-scrim: rgba(23, 26, 32, .35);
  --cq-camera-on-media: #ffffff;
  --cq-camera-on-media-muted: rgba(255, 255, 255, .82);
  --cq-camera-button-bg: rgba(255, 255, 255, .16);       /* the other buttons: see-through */
  --cq-camera-button-ink: #ffffff;
  --cq-camera-primary-bg: #ffffff;                       /* over the camera: a white main action */
  --cq-camera-primary-ink: var(--design-ink);
  --cq-camera-sheet-primary-bg: var(--design-primary);
  --cq-camera-sheet-primary-ink: var(--design-on-primary);
  --cq-camera-sheet-bg: #ffffff;
  --cq-camera-sheet-ink: var(--design-ink);
  --cq-camera-sheet-muted: var(--design-muted);
  --cq-camera-field-border: var(--design-hairline-strong);
  --cq-camera-error: #ffb4a8;
  --cq-camera-radius: var(--design-radius-control);
  --cq-camera-sheet-radius: var(--design-radius-card);
  --cq-camera-title-size: 40px;
}
.cq-camera * { font-family: var(--design-font); letter-spacing: normal; }
.cq-camera-title { font-weight: 500; }
.cq-camera-actions button, .cq-camera-button { min-width: 160px; }
.cq-camera-actions button:hover, .cq-camera-button:hover { background: rgba(255, 255, 255, .26); }
.cq-camera-button.is-primary:hover { background: #f4f4f4; }
.cq-camera-sheet .cq-camera-button.is-primary:hover { background: var(--design-primary-hover); }
.cq-camera-oval { border-width: 2px; box-shadow: 0 0 0 200vmax rgba(23, 26, 32, .3); }
.cq-camera-backdrop { background: var(--design-overlay); }
.cq-camera-sheet .cq-camera-button:not(.is-primary) { background: var(--design-surface); border: 0; color: var(--design-body); }
.cq-camera-sheet input { border-radius: var(--design-radius-control); }
.facelogin-nav { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* 6. Phone width ---------------------------------------------------------------------------------------------- */
@media (max-width: 575px) {
  html body .cq-tabs { padding-left: 12px; padding-right: 12px; }
  html body .cq-tabs button { flex: 1; }
  html body .cq-title { font-size: 22px; }
  html body .cq-card > pre { margin: 0 20px 16px; }
  :root { --cq-camera-title-size: 28px; }
  .cq-camera-actions button, .cq-camera-button { min-width: 0; }
  html body .cq-submit, html body .cq-form .btn { width: 100%; }
}
@media (pointer: coarse) {
  html body .btn, html body .form-control, html body .form-select { min-height: var(--cq-touch-target); }
}

/* 9. The Caligrafy mark next to the name (public/images/resources/caligrafy-mark.svg) ------------------------------ */
html body .cq-nav-mark { width: 28px; height: 28px; }
html body header h1.large-text a { display: inline-flex; align-items: center; }
html body header .cq-nav-mark { width: 26px; height: 26px; margin-right: 10px; }