/* DublinIT / Porter — shared design tokens and base components.
   Concept: the front door (WhatsApp, simple) and the back room (a real computer doing the work).
   Owner: main session. Pages add their own CSS in their own files; do not edit this file from a page agent. */

/* Self-hosted fonts (SIL Open Font License): Archivo (variable width + weight) and JetBrains Mono,
   latin + latin-ext subsets from Google Fonts. Faster than the fonts.googleapis.com round trip. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  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 {
  /* Core palette */
  --granite: #E3E5E1;      /* page — cool Dublin granite */
  --granite-2: #D3D7D1;    /* sunken / dividers on granite */
  --limestone: #F7F8F5;    /* raised surfaces */
  --ink: #15233B;          /* text, navy */
  --ink-2: #3A4760;        /* secondary text */
  --ink-3: #58647B;        /* tertiary text, 4.7:1 on granite (WCAG AA) */
  --line: rgba(21, 35, 59, .16);
  --saffron: #F4C430;      /* the one action colour */
  --saffron-hover: #FFD24A;
  --on-saffron: #15233B;
  --brass: #A8834B;
  --navy: #15233B;         /* brand navy, NOT themed (logo tiles, avatar) */

  /* Georgian doors — one bold moment per page */
  --door-red: #B3262F;
  --door-blue: #24479C;
  --door-green: #1F5E46;
  --door-plum: #5B2A4E;
  --door-teal: #1C6E73;
  --door-saffron: #F4C430;
  --fanlight: #F7F8F5;

  /* The back room (terminal) */
  --backroom: #0E1828;
  --backroom-2: #162338;
  --backroom-line: rgba(215, 224, 238, .12);
  --term-text: #D7E0EE;
  --term-dim: #8592AA;
  --term-ok: #7FD4A0;
  --term-warn: #F4C430;
  --term-err: #FF8A80;
  --term-cmd: #9CC4FF;

  /* Inside the phone only (WhatsApp-like, dark) */
  --wa-bg: #0B141A;
  --wa-panel: #202C33;
  --wa-in: #202C33;
  --wa-out: #005C4B;
  --wa-text: #E9EDEF;
  --wa-meta: #8696A0;
  --wa-tick: #53BDEB;
  --wa-accent: #00A884;

  /* Type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-md: 1.25rem;    /* 20 */
  --fs-lg: 1.5rem;     /* 24 */
  --fs-xl: 2rem;       /* 32 */
  --fs-2xl: clamp(2.25rem, 4.6vw, 3.25rem);
  --fs-display: clamp(2.75rem, 7.4vw, 5.75rem);
  --lh-body: 1.55;
  --lh-tight: .95;
  --display-stretch: 75%;

  /* Space & shape */
  --gutter: 16px;
  --wrap: 1200px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-phone: 0 30px 60px -20px rgba(21, 35, 59, .45), 0 12px 24px -12px rgba(21, 35, 59, .35);
  --focus: 0 0 0 3px var(--granite), 0 0 0 6px var(--ink);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (min-width: 760px) { :root { --gutter: 32px; } }

/* Dark mode — "Dublin at night" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --granite: #111C2E;
    --granite-2: #0B1422;
    --limestone: #18263D;
    --ink: #E8ECF2;
    --ink-2: #BAC3D3;
    --ink-3: #93A0B6;
    --line: rgba(232, 236, 242, .14);
    --fanlight: #E8ECF2;
    --backroom: #070D18;
    --backroom-2: #0F182A;
    --shadow-phone: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .6);
    --focus: 0 0 0 3px var(--granite), 0 0 0 6px var(--saffron);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --granite: #111C2E;
  --granite-2: #0B1422;
  --limestone: #18263D;
  --ink: #E8ECF2;
  --ink-2: #BAC3D3;
  --ink-3: #93A0B6;
  --line: rgba(232, 236, 242, .14);
  --fanlight: #E8ECF2;
  --backroom: #070D18;
  --backroom-2: #0F182A;
  --shadow-phone: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 12px 24px -12px rgba(0, 0, 0, .6);
  --focus: 0 0 0 3px var(--granite), 0 0 0 6px var(--saffron);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--granite);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: var(--saffron); color: var(--on-saffron); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }

.display {
  font-size: var(--fs-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-2xl);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.lede { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); max-width: 38ch; text-wrap: pretty; }
.prose { max-width: 64ch; color: var(--ink-2); text-wrap: pretty; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--saffron); --btn-fg: var(--on-saffron); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.25em;
  border: 2px solid var(--btn-bd); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.1; text-decoration: none;
  cursor: pointer; transition: background-color .15s, transform .15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --btn-bg: var(--saffron-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--granite); }
.btn--ink:hover { --btn-bg: var(--ink-2); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--line:hover { --btn-bg: rgba(127, 127, 127, .1); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* ---------- Header & footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--granite) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-stretch: var(--display-stretch); font-size: 1.375rem; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand small { font-weight: 500; font-stretch: 100%; font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: 0; }
.site-nav { display: none; margin-left: auto; gap: var(--s5); font-size: var(--fs-sm); font-weight: 600; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.site-header .btn { margin-left: auto; min-height: 40px; padding: .5em 1em; }
@media (min-width: 900px) { .site-nav { display: flex; } .site-header .btn { margin-left: 0; } }

.site-footer { border-top: 1px solid var(--line); padding-block: var(--s7); color: var(--ink-3); font-size: var(--fs-sm); }
.site-footer .wrap { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Logo marks ---------- */
.fanlight { width: 40px; height: 22px; color: currentColor; overflow: visible; }
.fanlight .bar { transition: opacity .2s; }
.fanlight.is-working .bar { animation: fan-sweep 1.4s infinite; opacity: .25; }
.fanlight.is-working .bar:nth-of-type(2) { animation-delay: .12s; }
.fanlight.is-working .bar:nth-of-type(3) { animation-delay: .24s; }
.fanlight.is-working .bar:nth-of-type(4) { animation-delay: .36s; }
.fanlight.is-working .bar:nth-of-type(5) { animation-delay: .48s; }
@keyframes fan-sweep { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------- Message bubbles on the page (light, outside the phone) ---------- */
.bubble {
  position: relative; display: inline-block; max-width: 34ch;
  padding: .6em .85em .55em; border-radius: 14px 14px 14px 4px;
  background: var(--limestone); color: var(--ink);
  box-shadow: 0 1px 0 rgba(21, 35, 59, .12);
  font-size: var(--fs-sm); line-height: 1.4; text-align: left;
}
.bubble--out { border-radius: 14px 14px 4px 14px; background: #D9FDD3; color: #10241B; }
:root[data-theme="dark"] .bubble--out { background: #005C4B; color: #E9EDEF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bubble--out { background: #005C4B; color: #E9EDEF; } }
button.bubble { border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); }
button.bubble:hover { filter: brightness(.97); }

/* ---------- The phone (front door) ---------- */
.phone {
  --phone-w: 340px;
  position: relative; width: min(100%, var(--phone-w)); aspect-ratio: 9 / 18.5;
  border-radius: 46px; padding: 10px; background: #1B1F24;
  box-shadow: var(--shadow-phone), inset 0 0 0 2px #2B3138;
}
.phone__screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: var(--wa-bg); display: flex; flex-direction: column; color: var(--wa-text); font-size: 14.5px; line-height: 1.35; }
.phone__notch { position: absolute; top: 9px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 3; }

.wa-head { display: flex; align-items: center; gap: 10px; padding: 40px 14px 10px; background: var(--wa-panel); }
.wa-head__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--saffron); display: grid; place-items: center; flex: none; }
.wa-head__avatar svg { width: 24px; height: 14px; }
.wa-head__name { font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.wa-head__status { font-size: 12.5px; color: var(--wa-meta); min-height: 1.2em; }
.wa-feed {
  flex: 1; overflow-y: auto; padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: none; overscroll-behavior: contain;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 18px 18px;
}
.wa-feed::-webkit-scrollbar { display: none; }
.wa-day { align-self: center; margin: 4px 0 8px; padding: 4px 10px; border-radius: 8px; background: #182229; color: var(--wa-meta); font-size: 12px; }
.wa-msg { position: relative; max-width: 84%; padding: 6px 8px 18px 9px; border-radius: 9px; background: var(--wa-in); align-self: flex-start; word-wrap: break-word; white-space: pre-wrap; }
.wa-msg--out { background: var(--wa-out); align-self: flex-end; }
.wa-msg + .wa-msg--out, .wa-msg--out + .wa-msg:not(.wa-msg--out) { margin-top: 6px; }
.wa-msg__meta { position: absolute; right: 8px; bottom: 3px; font-size: 11px; color: var(--wa-meta); display: inline-flex; gap: 3px; align-items: center; }
.wa-msg--out .wa-msg__meta { color: rgba(233, 237, 239, .8); }
.wa-msg__ticks { color: var(--wa-tick); letter-spacing: -3px; }
.wa-msg strong { font-weight: 700; }
.wa-msg.is-new { animation: wa-pop .22s var(--ease-out); }
@keyframes wa-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 12px; border-radius: 9px; background: var(--wa-in); }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-meta); animation: wa-dot 1s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; }
.wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* rich content inside a message */
.wa-card { margin: 2px -2px 0; border-radius: 7px; background: rgba(0, 0, 0, .22); overflow: hidden; white-space: normal; }
.wa-card__title { padding: 8px 10px 2px; font-weight: 700; font-size: 13.5px; }
.wa-card__sub { padding: 0 10px 6px; color: var(--wa-meta); font-size: 12px; }
.wa-card__rows { margin: 0; padding: 2px 10px 8px; list-style: none; display: grid; gap: 4px; font-size: 13px; }
.wa-card__rows li { display: flex; justify-content: space-between; gap: 10px; }
.wa-card__rows li span:last-child { color: var(--wa-text); font-variant-numeric: tabular-nums; text-align: right; }
.wa-card__rows li span:first-child { color: #C7D0D6; }
.wa-card__total { display: flex; justify-content: space-between; padding: 7px 10px; border-top: 1px solid rgba(255,255,255,.08); font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-card__list { margin: 0; padding: 0 0 4px; list-style: none; }
.wa-card__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.wa-card__list li b { font-weight: 600; }
.wa-card__list li small { grid-column: 1; color: var(--wa-meta); font-size: 11.5px; }
.wa-card__list li em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 11.5px; padding: 2px 7px; border-radius: 99px; background: rgba(0, 168, 132, .18); color: #7FE0C4; }
.wa-card__actions { display: flex; border-top: 1px solid rgba(255,255,255,.08); }
.wa-card__actions span { flex: 1; padding: 8px 4px; text-align: center; color: #53BDEB; font-weight: 600; font-size: 13px; }
.wa-card__actions span + span { border-left: 1px solid rgba(255,255,255,.08); }
.wa-voice { display: flex; align-items: center; gap: 8px; min-width: 200px; padding: 2px 0; }
.wa-voice__play { width: 0; height: 0; border-left: 11px solid #C7D0D6; border-top: 7px solid transparent; border-bottom: 7px solid transparent; flex: none; margin-left: 4px; }
.wa-voice__wave { flex: 1; height: 22px; background: repeating-linear-gradient(90deg, rgba(199,208,214,.75) 0 2px, transparent 2px 5px); clip-path:polygon(0 40%, 6% 20%, 12% 55%, 18% 10%, 24% 45%, 30% 25%, 36% 60%, 42% 15%, 48% 50%, 54% 30%, 60% 65%, 66% 20%, 72% 45%, 78% 35%, 84% 55%, 90% 25%, 100% 50%, 100% 100%, 0 100%); }
.wa-voice__dur { font-size: 11.5px; color: var(--wa-meta); }
.wa-transcript { margin-top: 4px; font-size: 12.5px; color: #C7D0D6; font-style: italic; }
.wa-doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: rgba(0, 0, 0, .22); white-space: normal; }
.wa-doc__icon { width: 30px; height: 36px; border-radius: 4px; background: #E9EDEF; color: #B3262F; font-size: 9px; font-weight: 800; display: grid; place-items: end center; padding-bottom: 4px; flex: none; }
.wa-doc b { display: block; font-weight: 600; font-size: 13px; }
.wa-doc small { color: var(--wa-meta); font-size: 11.5px; }
.wa-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; margin-bottom: 4px; overflow: hidden; background: #2A3942; }

.wa-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px 14px; background: var(--wa-bg); }
.wa-input__field { flex: 1; min-height: 40px; display: flex; align-items: center; padding: 8px 14px; border-radius: 22px; background: var(--wa-panel); color: var(--wa-text); font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-input__field:empty::before { content: attr(data-placeholder); color: var(--wa-meta); }
input.wa-input__field { border: 0; outline: none; width: 100%; }
input.wa-input__field::placeholder { color: var(--wa-meta); }
input.wa-input__field:focus-visible { box-shadow: 0 0 0 2px var(--wa-accent); }
.wa-input__send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--wa-accent); color: #0B141A; display: grid; place-items: center; flex: none; cursor: pointer; }
.wa-input__send svg { width: 20px; height: 20px; }
.wa-input__send:focus-visible { box-shadow: 0 0 0 2px var(--wa-bg), 0 0 0 4px var(--saffron); }

/* ---------- The back room (terminal) ---------- */
.term {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-md); background: var(--backroom); color: var(--term-text);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  box-shadow: 0 24px 48px -24px rgba(14, 24, 40, .6); overflow: hidden;
}
.term__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--backroom-2); border-bottom: 1px solid var(--backroom-line); color: var(--term-dim); font-size: 11.5px; }
.term__bar b { color: var(--term-text); font-weight: 600; }
.term__dots { display: inline-flex; gap: 6px; margin-right: 4px; }
.term__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2C3A52; }
.term__body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; scrollbar-width: thin; scrollbar-color: #2C3A52 transparent; }
.term__line { white-space: pre-wrap; word-break: break-word; }
.term__line.is-cmd { color: var(--term-cmd); }
.term__line.is-cmd::before { content: "porter@backroom:~$ "; color: var(--term-ok); }
.term__line.is-ok { color: var(--term-ok); }
.term__line.is-warn { color: var(--term-warn); }
.term__line.is-err { color: var(--term-err); }
.term__line.is-dim { color: var(--term-dim); }
.term__cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--term-text); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Demo-data hint (Lucas's "data in sight" principle) ---------- */
[data-hint] { text-decoration: underline dotted rgba(127,127,127,.6); text-underline-offset: .2em; cursor: help; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* small phones: keep the header on one line */
@media (max-width: 520px) {
  .brand small { display: none; }
  .site-header .btn { padding: .5em .9em; font-size: var(--fs-xs); }
  .site-header .wrap { gap: var(--s3); }
}