/* Hypha · shared app kit: the parts every simulated app is built from (README.md). Each app in its real counterpart's
   own face, real density (12-14 px text, 28-36 px rows), shown big by the camera, never by growing the type. Colours
   and sizes are kit-rainmaker-aftercare/_ref/REAL-APP-SPEC.md section 3. Each app keeps its own invented mark and
   accent (--ak-acc); real company marks sit only in an app's data (.ak-logo). */

/* The apps' faces (README.md "Faces"). An app root sets --f-app to one of these; the page's own words keep Geist and
   Space Grotesk (shared/type.css).
     --f-sys     Inter, the open stand-in for SF Pro: the Mac's and the phone's own UI (menu bar, notifications, status
                 bar, lock and call screens) and the SaaS apps (CRM, pipeline, recorder, notes, assistant, feed,
                 directory). The default on a device's screen (css/seat.css).
     --f-google  Roboto for the Google-style mail, calendar, call and doc; --f-slack  Lato for the Slack-style chat and
                 its notifications.
   Inter.woff2 is Inter 4.001 as GNOME ships it in Adwaita Sans (its one change: the tailed lowercase l), Latin only
   (_check/subset_ttf.py), its weights and optical sizes variable; OFL 1.1, fonts/Inter-OFL.txt.
   Roboto.woff2 (Roboto v51, weights 400-700 variable) and Lato-Regular.woff2 / Lato-Bold.woff2 (Lato v25, 400 and 700)
   are Google Fonts' latin subsets, added 2026-10-25 by the foreman; OFL 1.1, fonts/Roboto-OFL.txt and fonts/Lato-OFL.txt. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+0192, U+01FA-01FF, U+0218-021B, U+0237, U+02BB-02BC, U+02C6-02DD,
    U+0300-030C, U+0323-0328, U+2000-206F, U+20AC, U+2113, U+2116, U+2122, U+2190-2199, U+2212-2215, U+2318,
    U+2713-2714, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --f-sys: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-google: "Roboto", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-slack: "Lato", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ak-phone, .ak-menu, .ak-note, .ak-status { --f-app: var(--f-sys); font-family: var(--f-app); }

.ak {
  --ak-acc: #3b63e0;
  --ak-t1: #1f2328;
  --ak-t2: #59636e;
  --ak-t3: #8b929b;
  --ak-t4: #b8bdc4;
  --ak-line: #e6e8eb;
  --ak-line2: #dcdfe3;
  --ak-bg: #fff;
  --ak-bg2: #f7f7f8;
  --ak-bg3: #f1f2f4;
  --ak-sel: #e8eaee;
  --ak-shadow-card: 0 1px 1px rgb(9 30 66 / 0.25), 0 0 1px rgb(9 30 66 / 0.31);
  --ak-shadow-pop: 0 8px 24px rgb(16 24 40 / 0.12), 0 0 0 1px rgb(16 24 40 / 0.06);
  --ak-shadow-modal: 0 24px 64px rgb(16 24 40 / 0.24), 0 0 0 1px rgb(16 24 40 / 0.06);
  font-family: var(--f-app);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--ak-t1);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ak *, .ak *::before, .ak *::after { box-sizing: border-box; }
/* the dark apps (the recorder, the call, the chat at night) */
.ak--dark {
  --ak-t1: #ececf1;
  --ak-t2: #a1a1aa;
  --ak-t3: #6b6b76;
  --ak-t4: #4a4a53;
  --ak-line: #2c2b33;
  --ak-line2: #34333c;
  --ak-bg: #1c1b21;
  --ak-bg2: #222128;
  --ak-bg3: #2a2930;
  --ak-sel: #33323a;
}

/* type roles (section 2) */
.ak-h1 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.ak-h { font-size: 15px; line-height: 20px; font-weight: 600; }
.ak-b { font-size: 13px; line-height: 20px; }
.ak-row1 { font-size: 13px; line-height: 18px; font-weight: 500; }
.ak-lab { font-size: 12px; line-height: 16px; font-weight: 500; }
.ak-meta { font-size: 11px; line-height: 14px; color: var(--ak-t3); }
.ak-cap { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ak-t3); }
.ak-mono { font-family: var(--f-mono); font-size: 11px; }
.ak-t2 { color: var(--ak-t2); }
.ak-t3 { color: var(--ak-t3); }
.ak-ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }

/* icons: Lucide, 16 px, 1.5 stroke (AK.icon) */
.ak-ic { flex: none; width: var(--is, 16px); height: var(--is, 16px); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- window chrome ---------- */
/* a native window: the title bar's three lights, the app's own surface */
.ak-win { position: relative; overflow: hidden; border-radius: 10px; background: var(--ak-bg); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.28), 0 22px 56px rgb(0 0 0 / 0.28), 0 4px 12px rgb(0 0 0 / 0.12); }
.ak-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 14px; flex: none; }
.ak-lights { display: inline-flex; gap: 8px; flex: none; }
.ak-lights i { width: 12px; height: 12px; border-radius: 50%; background: #fe615c; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.ak-lights i:nth-child(2) { background: #ffbe30; }
.ak-lights i:nth-child(3) { background: #29cc3f; }
.ak-lights--off i { background: #d5d7da; }
.ak--dark .ak-lights--off i { background: #4a4950; }
.ak-bar-title { position: absolute; left: 50%; translate: -50% 0; font-size: 13px; font-weight: 500; color: var(--ak-t2); white-space: nowrap; }

/* a browser: the tab strip and the address bar (web apps) */
.ak-br { display: flex; flex-direction: column; background: #fff; }
.ak-br-tabs { display: flex; align-items: flex-end; gap: 2px; height: 38px; padding: 0 8px 0 84px; background: #dfe1e5; position: relative; flex: none; }
.ak-br-tabs .ak-lights { position: absolute; left: 14px; top: 13px; }
.ak-br-tab { display: flex; align-items: center; gap: 8px; width: 220px; height: 32px; padding: 0 10px 0 12px; border-radius: 8px 8px 0 0; font-size: 12px; line-height: 16px; color: #3c4043; white-space: nowrap; overflow: hidden; }
.ak-br-tab.is-on { background: #fff; color: #1f1f1f; }
.ak-br-tab .ak-fav { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; }
.ak-br-tab .ak-x { margin-left: auto; --is: 14px; color: #5f6368; }
.ak-br-tab span { overflow: hidden; text-overflow: ellipsis; }
.ak-br-addr { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--ak-line); flex: none; color: #5f6368; }
.ak-br-pill { flex: 1; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 15px; background: #f1f3f4; font-size: 13px; color: #5f6368; white-space: nowrap; overflow: hidden; }
.ak-br-pill b { font-weight: 400; color: #1f1f1f; }
.ak-br-pill .ak-ic { --is: 13px; }
.ak-br-nav { display: flex; gap: 2px; }
.ak-br-nav .ak-ic { --is: 18px; margin: 0 4px; }

/* the laptop's menu bar (a desktop app's own name and menus; no maker's mark) */
.ak-menu { display: flex; align-items: center; gap: 18px; height: 28px; padding: 0 16px; font-size: 13px; color: #1d1d1f; background: rgb(236 238 241 / 0.94); flex: none; position: relative; }
.ak-menu b { font-weight: 600; }
.ak-menu .ak-menu-r { margin-left: auto; display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }

/* ---------- navigation ---------- */
.ak-side { width: 232px; flex: none; background: var(--ak-bg2); padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--ak-line); }
.ak-side-i { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ak-t2); white-space: nowrap; }
.ak-side-i.is-on { background: var(--ak-sel); color: var(--ak-t1); }
.ak-side-i.is-new { color: var(--ak-t1); font-weight: 600; }
.ak-side-i .ak-n { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ak-t3); }
.ak-side-lab { margin: 14px 8px 4px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ak-t3); }
.ak-rail { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; }
.ak-rail-i { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: rgb(255 255 255 / 0.7); --is: 20px; }
.ak-rail-i.is-on { background: rgb(255 255 255 / 0.16); color: #fff; }
.ak-tabs { display: flex; align-items: stretch; gap: 18px; height: 36px; border-bottom: 1px solid var(--ak-line); padding: 0 16px; flex: none; }
.ak-tab { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ak-t2); position: relative; white-space: nowrap; }
.ak-tab b { font-size: 11px; font-weight: 400; color: var(--ak-t3); }
.ak-tab.is-on { color: var(--ak-t1); }
.ak-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--ak-acc); }

/* ---------- controls ---------- */
.ak-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; background: var(--ak-acc); color: #fff; flex: none; }
.ak-btn--2 { background: var(--ak-bg); color: var(--ak-t1); box-shadow: inset 0 0 0 1px #d0d4da; }
.ak--dark .ak-btn--2 { box-shadow: inset 0 0 0 1px var(--ak-line2); }
.ak-btn--ghost { background: transparent; color: var(--ak-t2); }
.ak-tbtn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--ak-t2); flex: none; }
.ak-tbtn.is-on { background: color-mix(in srgb, var(--ak-acc) 12%, transparent); color: var(--ak-acc); }
.ak-div { width: 1px; height: 16px; background: var(--ak-line2); flex: none; }
.ak-input { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; background: #f4f5f7; color: var(--ak-t3); font-size: 13px; white-space: nowrap; }
.ak--dark .ak-input { background: var(--ak-bg3); }
.ak-kbd { display: inline-grid; place-items: center; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px #dfe1e4; font-family: var(--f-mono); font-size: 10px; line-height: 1; color: var(--ak-t2); }
.ak-input .ak-kbd { margin-left: auto; }

/* ---------- people, marks, states ---------- */
.ak-av { --s: 24px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--c, #4a6fd8); color: #fff; font-size: calc(var(--s) * 0.42); font-weight: 600; line-height: 1; letter-spacing: 0; }
.ak-avs { display: inline-flex; }
.ak-avs .ak-av { --s: 20px; box-shadow: 0 0 0 2px var(--ak-bg); }
.ak-avs .ak-av + .ak-av { margin-left: -6px; }
.ak-avs .ak-more { --s: 20px; background: #eceef1; color: #59636e; font-size: 10px; }
/* a company's own mark, inside an app's data: on a white tile with a hairline ring, its shape set by the slot */
.ak-logo { --s: 20px; --r: 5px; width: var(--s); height: var(--s); border-radius: var(--r); flex: none; display: inline-block; overflow: hidden; background: #fff; vertical-align: middle; position: relative; }
.ak-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ak-logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); pointer-events: none; }
.ak-logo--round { --r: 50%; }
.ak-logo--grey img { filter: grayscale(1); opacity: 0.6; }
.ak-pill { --h: #4a6fd8; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; background: color-mix(in srgb, var(--h) 14%, var(--ak-bg)); color: color-mix(in srgb, var(--h) 72%, #000); flex: none; }
.ak--dark .ak-pill { color: color-mix(in srgb, var(--h) 70%, #fff); background: color-mix(in srgb, var(--h) 22%, var(--ak-bg)); }
.ak-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--h); }
.ak-pill--cell { border-radius: 4px; }
.ak-pill--plain::before { content: none; }
.ak-badge { display: inline-grid; place-items: center; height: 16px; min-width: 16px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1; background: #e01e5a; color: #fff; flex: none; }
.ak-badge--n { background: #e4e6ea; color: #59636e; }
.ak-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ak-acc); flex: none; }

/* ---------- surfaces ---------- */
.ak-card { border-radius: 8px; padding: 12px; background: var(--ak-bg); box-shadow: var(--ak-shadow-card); }
.ak-pop { border-radius: 8px; background: var(--ak-bg); box-shadow: var(--ak-shadow-pop); padding: 4px; }
.ak-pop-i { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 5px; font-size: 12px; }
.ak-modal { border-radius: 12px; background: var(--ak-bg); box-shadow: var(--ak-shadow-modal); }
.ak-toast { display: flex; align-items: center; gap: 12px; width: 360px; height: 48px; padding: 0 16px; border-radius: 8px; background: #1f2328; color: #fff; font-size: 13px; }
.ak-hair { height: 1px; background: var(--ak-line); flex: none; }

/* a desktop notification: the app's mark and name, the title, the line, "now" */
.ak-note { width: 344px; border-radius: 14px; padding: 11px 12px; display: grid; grid-template-columns: 32px 1fr auto; column-gap: 10px; align-items: start; background: rgb(246 246 247 / 0.97); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 10px 28px rgb(0 0 0 / 0.16); color: #1d1d1f; font-family: var(--f-app); }
.ak-note-mark { grid-row: 1 / span 3; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.ak-note-app { font-size: 11px; line-height: 14px; font-weight: 500; color: #6e6e73; }
.ak-note-t { grid-column: 2; font-size: 13px; line-height: 17px; font-weight: 600; }
.ak-note-b { grid-column: 2 / span 2; font-size: 13px; line-height: 17px; color: #3a3a3c; }
.ak-note-when { grid-column: 3; grid-row: 1; font-size: 11px; line-height: 14px; color: #8e8e93; }

/* ---------- the phone's own chrome ---------- */
/* the status bar flanks the island: the time at the left, signal, wi-fi and battery at the right */
.ak-status { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 30px 0 36px; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; flex: none; }
.ak-status-r { display: flex; align-items: center; gap: 6px; }
/* a phone app's frame (AK.phone): the status bar over the app's body, the whole screen */
.ak-phone { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ak-bg); color: var(--ak-t1); overflow: hidden; }
.ak-phone-b { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ak-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.ak-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.ak-sig i:nth-child(1) { height: 4px; }
.ak-sig i:nth-child(2) { height: 6px; }
.ak-sig i:nth-child(3) { height: 8.5px; }
.ak-sig i:nth-child(4) { height: 11px; }
.ak-bat { position: relative; width: 25px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); padding: 2px; }
.ak-bat::before { content: ""; display: block; height: 100%; width: 78%; border-radius: 2px; background: currentColor; }
.ak-bat::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: color-mix(in srgb, currentColor 40%, transparent); }
.ak-wifi { width: 16px; height: 12px; }
.ak-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: currentColor; opacity: 0.85; }

/* ---------- live signals ---------- */
.ak-caret { display: inline-block; width: 1.5px; height: 18px; background: var(--ak-acc); vertical-align: text-bottom; }
.ak-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 500; color: #fff; background: var(--c, #a35bd4); white-space: nowrap; }
.ak-mark { flex: none; display: block; }