/* diarydeck. One stylesheet for the public pages and the admin.
   Brand guidelines v1.0, November 2026: Studio Green, Archivo, square corners, rules
   rather than cards. The admin runs on green with white text; the booking page and the
   marketing site run on Paper with Ink, because those are what a client sees. */

/* One family for everything, self-hosted (the CSP is font-src 'self'). Archivo is
   variable, so every weight comes out of one file per subset.

   The single file that used to be here was the *vietnamese* subset: 115 codepoints
   whose only printable ASCII was a capital A. Google lists vietnamese first in its
   CSS, so saving the first url() you see gets you a font with no lowercase letters.
   Nothing errored -- the file loaded, and every character quietly fell through to
   the system sans, so the site never actually rendered its own brand typeface.
   Each subset now carries the unicode-range Google serves it with. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('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-display: swap;
  src: url('fonts/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display: var(--sans);        /* one family: headings differ by weight, not by face */

  --brand: #1e4a3e;              /* Studio Green */
  --brand-deep: #183e34;         /* sidebar, secondary panels */
  --brand-field: #173b31;        /* input fills on green */
  --brand-ink: #ffffff;          /* text on green */
  --ink: #1c211f;
  /* Green and white are the grounds. Paper stays in the palette for print and for the
     rare warm panel, but it is no longer what a page sits on. */
  --paper: #f4f2ed;
  --bg: #ffffff;
  --card: #ffffff;

  /* Neutrals are mixed from Ink, and the quiet fill is tinted with the brand rather than
     grey, so a white ground still reads as part of a green scheme. */
  --muted: color-mix(in srgb, var(--ink) 62%, #fff);
  --faint: color-mix(in srgb, var(--ink) 44%, #fff);
  --line: color-mix(in srgb, var(--brand) 16%, #fff);
  --line-strong: color-mix(in srgb, var(--brand) 32%, #fff);
  --soft: color-mix(in srgb, var(--brand) 6%, #fff);

  /* On green the guidelines set these exactly: text white, secondary 75%, borders 30%,
     dividers 18%. */
  --on-green: rgba(255, 255, 255, .75);
  --on-green-line: rgba(255, 255, 255, .30);
  --on-green-rule: rgba(255, 255, 255, .18);

  --ok: #1d7a4f;
  --ok-bg: #e5f3eb;
  --warn: #9a6200;
  --warn-bg: #fbf1dc;
  --bad: #b3261e;
  --bad-bg: #fbe9e7;

  /* Square everything. Kept as tokens because a tenant's own brand may still round its
     booking page -- the square rule is diarydeck's, not every business's. */
  --radius: 0px;
  --radius-sm: 0px;
  --shadow: none;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12M8.5 1l3.5 3.5L8.5 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 var(--sans);
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }

/* One family differing by weight: SemiBold for headings, labels and buttons, Regular for
   body and helper text. The sizes are the guidelines' scale. */
h1, h2, h3 { font-family: var(--sans); line-height: 1.2; margin: 0 0 .5em;
             letter-spacing: -.015em; font-weight: 600; }
h1 { font-size: 34px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
.faint { color: var(--faint); }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
[hidden] { display: none !important; }

/* ---------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--brand);
  background: var(--brand); color: var(--brand-ink); cursor: pointer; text-decoration: none;
  white-space: nowrap; letter-spacing: -.01em;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
/* The arrow is drawn rather than typed, so a button never needs markup changing to get one
   and never loses it to a font that lacks the glyph. */
.btn::after { content: ""; width: 14px; height: 9px; flex: none;
              background: currentColor;
              -webkit-mask: var(--arrow) no-repeat center / contain;
              mask: var(--arrow) no-repeat center / contain; }
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
/* On a green ground the primary action inverts: white panel, green label. */
.on-green .btn, .btn.inverse {
  background: #fff; border-color: #fff; color: var(--brand);
}
.on-green .btn:hover, .btn.inverse:hover { background: var(--bg); border-color: var(--bg); }
.btn.secondary { background: transparent; color: var(--brand); }
.btn.secondary:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); }
.on-green .btn.secondary { background: transparent; border-color: var(--on-green-line); color: #fff; }
.on-green .btn.secondary:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover { background: var(--soft); border-color: var(--line-strong); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { padding: 9px 12px; font-size: 13px; gap: 16px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Buttons that are a choice rather than an action take no arrow: an arrow means "go". */
.btn.quiet, .btn.plain { justify-content: center; gap: 6px; background: transparent;
                         border-color: var(--line-strong); color: var(--ink); }
.btn.quiet::after, .btn.plain::after, .btn.danger::after { display: none; }
.btn.quiet:hover { background: var(--soft); }
.linkish { white-space: nowrap; background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; }
.linkish.bad { color: var(--bad); }

label { display: block; font-weight: 550; font-size: 13.5px; margin: 0 0 5px;
        letter-spacing: -.004em; color: var(--ink); }
label .muted { font-weight: 400; }
.field { margin: 0 0 16px; }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 5px; }
.field .error, .error-text { font-size: 13px; color: var(--bad); margin-top: 5px; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 8px 0; cursor: pointer; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.row > .field { flex: 1 1 160px; }
.inline { display: inline; }
.stack > * + * { margin-top: 12px; }

.flash { padding: 11px 14px; border-radius: var(--radius-sm); margin: 0 0 18px; font-size: 14px; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--bad-bg); color: var(--bad); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-sm); background: var(--soft); color: var(--muted); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pill { border-radius: var(--radius-sm); }
.card.pad { padding: 24px; }
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.list td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }

/* ================================================================ public pages */
.public { min-height: 100vh; padding: 40px 16px 60px; }
.public.embedded { padding: 0; min-height: 0; background: transparent; }
.shell { max-width: 1060px; margin: 0 auto; }
.brandbar { text-align: center; margin: 0 0 26px; }
/* Logos differ wildly: an emblem is square, a wordmark can be six times as wide. Height is
   what the business chooses; the width cap is what stops a long wordmark running off a
   phone. 44px was too small for any wordmark with fine type in it. */
.brandbar img { max-height: var(--logo-h, 76px); max-width: min(340px, 86%);
                width: auto; height: auto; vertical-align: middle; }
.brandbar.size-s img { --logo-h: 50px; }
.brandbar.size-l img { --logo-h: 112px; }
/* A logo drawn in white for a dark background is invisible on a pale page, so it gets
   the brand colour behind it rather than being silently useless. */
.brandbar.on-plate a { display: inline-block; background: var(--brand); padding: 14px 26px;
                       border-radius: var(--radius); }
.brandbar .name { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 600; text-decoration: none; }

.profile { max-width: 680px; margin: 0 auto; }
.profile-head { text-align: center; padding: 36px 28px 28px; border-bottom: 1px solid var(--line); }
.profile-head h1 { margin-bottom: 8px; }
.profile-head p { max-width: 46ch; margin: 0 auto; }
.profile-photo { width: 92px; height: 92px; border-radius: var(--radius); object-fit: cover;
                 margin: 0 auto 16px; display: block; border: 3px solid var(--card);
                 box-shadow: 0 0 0 1px var(--line); }

/* One generous row per event type. A list rather than a grid because a grid leaves an
   orphan whenever the count is odd, and because the description needs the width. */
.event-list { display: flex; flex-direction: column; overflow: hidden;
              border-radius: 0 0 var(--radius) var(--radius); }
.event-row { display: grid; grid-template-columns: 4px 1fr 24px; align-items: center; gap: 18px;
             padding: 0; text-decoration: none; color: var(--ink);
             border-bottom: 1px solid var(--line); transition: background .12s ease; }
.event-row:last-child { border-bottom: 0; }
.event-row:hover { background: var(--soft); }
.event-row:focus-visible { outline: 2px solid var(--et); outline-offset: -2px; }
/* The event's own colour, down the left edge. It grows on hover, which is the whole
   hover affordance: no shadow, no lift, nothing that shifts the row. */
.et-spine { align-self: stretch; background: var(--et); width: 4px;
            transition: width .12s ease; }
.event-row:hover .et-spine { width: 7px; }
.et-body { padding: 20px 0; min-width: 0; }
.et-body h2 { font-size: 17px; margin: 0 0 5px; }
.et-body p { color: var(--muted); font-size: 14px; margin: 0 0 11px; display: -webkit-box;
             -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.et-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.et-meta .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
                 color: var(--muted); background: var(--soft); border: 1px solid var(--line);
                 border-radius: var(--radius-sm); padding: 4px 11px 4px 9px; }
.event-row:hover .et-meta .chip { background: var(--card); }
.et-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8;
               stroke-linecap: round; stroke-linejoin: round; flex: none; }
.et-go { color: var(--faint); padding-right: 22px; transition: transform .12s ease, color .12s ease; }
.et-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
             stroke-linecap: round; stroke-linejoin: round; display: block; }
.event-row:hover .et-go { color: var(--et); transform: translateX(3px); }

.scheduler { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; overflow: hidden; }
.scheduler .info { padding: 28px; border-right: 1px solid var(--line); }
.scheduler .main { padding: 28px; min-width: 0; }
.info .host { color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.info h1 { font-size: 24px; margin-bottom: 16px; }
.facts { list-style: none; padding: 0; margin: 0 0 18px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-weight: 600; font-size: 14px; margin: 0 0 10px; }
.facts svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.facts li.when { color: var(--ok); }
.info .desc { font-size: 14px; color: var(--ink); white-space: pre-line; }
.back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--brand); text-decoration: none; margin-bottom: 16px; font-size: 18px; }

.picker { display: grid; grid-template-columns: 1fr 220px; gap: 28px; }
.picker.no-day { grid-template-columns: 1fr; max-width: 440px; }
.picker h2 { font-size: 18px; margin-bottom: 18px; }
.durations { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.durations button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: #fff; cursor: pointer; }
.durations button[aria-pressed=true] { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.month-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.month-head .label { min-width: 150px; text-align: center; font-weight: 500; }
.month-head button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); cursor: pointer; font-size: 16px; }
.month-head button[disabled] { background: transparent; color: var(--faint); cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal .dow { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; padding: 4px 0; }
.cal button { aspect-ratio: 1; max-width: 46px; width: 100%; margin: 0 auto; border-radius: var(--radius-sm); border: 0; font: inherit; font-size: 15px; background: transparent; color: var(--faint); cursor: default; position: relative; }
.cal button.open { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); font-weight: 700; cursor: pointer; }
.cal button.open:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.cal button.selected { background: var(--brand); color: var(--brand-ink); }
.cal button.today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-loading { color: var(--muted); font-size: 14px; text-align: center; padding: 24px 0; }
.tzrow { margin-top: 22px; }
.tzrow label { font-size: 13px; }
.tzrow .controls { display: flex; gap: 10px; align-items: center; }
.tzrow select { max-width: 280px; font-size: 14px; padding: 8px 10px; }
.clock-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.clock-toggle button { font: inherit; font-size: 12px; font-weight: 600; border: 0; padding: 7px 10px; background: #fff; cursor: pointer; color: var(--muted); }
.clock-toggle button[aria-pressed=true] { background: var(--ink); color: #fff; }
.day h3 { font-weight: 500; margin: 6px 0 14px; }
.times { display: flex; flex-direction: column; gap: 8px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.slot { display: flex; gap: 8px; }
.slot button { flex: 1; font: inherit; font-weight: 700; font-size: 15px; padding: 13px 8px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: #fff; color: var(--brand); cursor: pointer; transition: all .15s; }
.slot button:hover { border-color: var(--brand); border-width: 2px; padding: 12px 7px; }
.slot.chosen .time { background: #5f5c55; border-color: #5f5c55; color: #fff; flex: 1; }
.slot .next { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.slot .left { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.none { color: var(--muted); font-size: 14px; }

.book-form { max-width: 520px; }
.guest-toggle { margin: -6px 0 18px; }
.sms-box { background: var(--soft); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 18px; }
.sms-box .check { margin: 0; }
.sms-box small { display: block; margin: 6px 0 0 26px; }
.legal { font-size: 12px; color: var(--muted); margin-top: 14px; }
.options .check { margin: 6px 0; }

.confirmation { max-width: 620px; margin: 0 auto; text-align: center; padding: 40px 28px; }
.confirmation .tick { width: 46px; height: 46px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.confirmation .tick.cancelled { background: var(--bad); }
.confirmation .summary { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; }
.confirmation .summary h2 { font-size: 18px; }
.confirmation .summary .facts li { font-weight: 500; }
.add-cal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0; }
.manage { display: flex; justify-content: center; gap: 22px; font-size: 14px; }
.powered { text-align: center; margin-top: 18px; font-size: 12px; color: var(--faint); }
.powered a { color: inherit; }
.was { text-decoration: line-through; color: var(--faint) !important; }

@media (max-width: 860px) {
  .scheduler { grid-template-columns: 1fr; }
  .scheduler .info { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px; }
  .scheduler .main { padding: 22px; }
  .picker { grid-template-columns: 1fr; }
  .times { max-height: none; }
}
@media (max-width: 480px) {
  .public { padding: 16px 12px 40px; }
  .confirmation { padding: 28px 16px; }
  .cal { gap: 3px; }
}

/* ================================================================ admin
   Sidebar on Studio Green, work surface on white. The green column carries the brand and
   the navigation; the content beside it is a white sheet with Ink text, because that is
   where a host reads bookings, fills in fields and scans lists all day. Rules rather
   than cards keeps the editorial look without tinting the ground. The booking page is
   NOT part of this -- a client sees the business's own colours, never diarydeck's. */
.admin { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh;
         background: var(--bg); color: var(--ink); }

.sidebar { background: var(--brand); border-right: 1px solid var(--brand-deep);
           color: #fff; padding: 22px 14px; position: sticky; top: 0; height: 100vh;
           overflow-y: auto; display: flex; flex-direction: column; }
.sidebar a { color: #fff; }
.sidebar .muted, .sidebar small { color: var(--on-green); }
.sidebar .logo { font-weight: 600; font-size: 19px; padding: 2px 10px 20px; display: flex;
                 align-items: center; gap: 9px; color: #fff; text-decoration: none;
                 letter-spacing: -.02em; text-transform: lowercase; }
.sidebar .logo img { height: 22px; width: auto; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
                 color: var(--on-green); text-decoration: none; font-weight: 600;
                 font-size: 14px; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* The selected item is the one white panel in the sidebar, as on the guidelines' sheet. */
.sidebar nav a.on { background: #fff; color: var(--brand); }
.sidebar nav .sep { height: 1px; background: var(--on-green-rule); margin: 12px 6px; }
.sidebar .me { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--on-green-rule);
               font-size: 13px; color: var(--on-green); }
.sidebar .me strong { display: block; color: #fff; }
.sidebar .linkish { color: #fff; }
.sidebar .acct-name { font-size: 13px; color: var(--on-green); padding: 0 10px 16px;
                      margin-top: -12px; overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; }

.content { padding: 34px 36px 80px; min-width: 0; max-width: 1180px; }
/* A rule sits under the page title, as the guidelines ask. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
             flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 18px;
             border-bottom: 1px solid var(--line-strong); }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 62ch; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line);
        margin-bottom: 22px; flex-wrap: wrap; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600;
          font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--brand); border-color: var(--brand); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar input, .toolbar select { width: auto !important; min-width: 160px;
                                  padding: 9px 11px !important; font-size: 14px; }
.toolbar .spacer { flex: 1; }

/* Lines, not cards. A panel on the work surface is a ruled block, not a floating box. */
.admin .card { background: transparent; border: 0; border-top: 1px solid var(--line-strong);
               box-shadow: none; }
.admin .card.pad { padding: 24px 0; }
.admin .section { padding: 24px 0; }
.admin .panel + .panel { margin-top: 0; border-top: 1px solid var(--line); }

/* Settings groups carry a two-digit number above their title. The number is generated,
   so adding a section never means renumbering by hand. */
.admin .content { counter-reset: section; }
.admin .numbered > .section { position: relative; }
.admin .numbered > .section > h2::before {
  counter-increment: section; content: counter(section, decimal-leading-zero);
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--brand); margin-bottom: 8px;
}

.admin .et-card { background: transparent; border: 0; border-top: 4px solid var(--brand);
                  box-shadow: none; }
.admin .et-list .et-card { border-left: 1px solid var(--line);
                           border-bottom: 1px solid var(--line); }

.day-group { margin-bottom: 22px; }
.day-group > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.booking-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.booking-row:last-child { border-bottom: 0; }
.booking-row:hover { background: var(--soft); }
.booking-row .when { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14px; }
.booking-row .who strong { display: block; }
.booking-row .who small { display: block; }
.booking-row.cancelled .who strong { text-decoration: line-through; color: var(--muted); }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.detail > * { min-width: 0; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.answers dt { font-weight: 600; margin-top: 12px; }
.answers dd { margin: 2px 0 0; white-space: pre-line; }
.msg-log td { font-size: 13px; }
.panel + .panel { margin-top: 18px; }

.et-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.et-card { border-top: 5px solid var(--brand); display: flex; flex-direction: column; }
.et-card .body { padding: 18px 20px; flex: 1; }
.et-card h2 { font-size: 17px; margin-bottom: 4px; }
.et-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.et-card.off { opacity: .6; }
.et-colour { display: inline-flex; align-items: center; }
.et-colour input[type=color] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%; background: none; cursor: pointer; }
.et-colour input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.et-colour input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.et-colour-bar { align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.et-colour-bar .hint { margin: 0; }
.et-card .actions { display: flex; gap: 12px; font-size: 13px; flex-wrap: wrap; }

.section { padding: 24px; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section > h2 { margin-bottom: 4px; }
.section > .lede { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.sticky-save { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); padding: 14px 0; margin-top: 18px; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); z-index: 5; }

.builder-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; background: #fff; }
.builder-item .row { align-items: center; }
.builder-item .remove { margin-left: auto; }

.week { display: grid; gap: 0; }
.weekday { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.weekday:last-child { border-bottom: 0; }
.weekday .spans { display: flex; flex-direction: column; gap: 8px; }
.span-row { display: flex; gap: 8px; align-items: center; }
.span-row input { width: 120px !important; padding: 8px 10px !important; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.unavail { color: var(--muted); font-size: 14px; padding-top: 6px; }
.override { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.override strong { min-width: 150px; }

.var-list { display: flex; flex-wrap: wrap; gap: 6px; }
.var-list button { font: 12px ui-monospace, Menlo, monospace; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; cursor: pointer; }
.var-list button:hover { border-color: var(--brand); color: var(--brand); }
.preview { background: var(--soft); border-radius: var(--radius); padding: 14px 16px; white-space: pre-wrap; font-size: 14px; }
.preview .subject { font-weight: 650; margin-bottom: 8px; }
.bubble { background: #e9e9eb; color: #000; border-radius: var(--radius-sm); padding: 10px 14px; max-width: 320px; white-space: pre-wrap; font-size: 14px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { padding: 18px 20px; }
.stat .n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.stat .l { color: var(--muted); font-size: 13px; }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 140px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { height: 10px; background: var(--soft); border-radius: var(--radius-sm); overflow: hidden; }
.bar .fill { height: 100%; background: var(--brand); border-radius: var(--radius-sm); }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; }
.hours div { background: var(--brand); border-radius: var(--radius-sm) 3px 0 0; min-height: 2px; }
.hours-axis { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; font-size: 10px; color: var(--faint); text-align: center; margin-top: 4px; }

.integration { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: start; }
.integration .logo { width: 44px; height: 44px; border-radius: var(--radius); background: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.copy-field { display: flex; gap: 8px; }
.copy-field input { font-family: ui-monospace, Menlo, monospace; font-size: 13px !important; }
/* The live embed preview on the Share page: a plain sheet so what you see is the frame
   itself, not this page's styling of it. */
.embed-demo { border: 1px solid var(--line-strong); background: #fff; padding: 8px; }
pre.code { background: var(--ink); color: #f1ede4; padding: 14px 16px; border-radius: var(--radius); overflow-x: auto; font-size: 13px; line-height: 1.5; white-space: pre; }


@media (max-width: 900px) {
  .admin { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--on-green-rule); }
  .sidebar .logo { padding: 4px 8px; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .sidebar nav .sep { display: none; }
  .sidebar .me { margin: 0 0 0 auto; padding: 0 8px; border: 0; }
  .sidebar .me strong, .sidebar .me span { display: none; }
  .content { padding: 22px 16px 60px; }
  .detail { grid-template-columns: 1fr; }
  .booking-row { grid-template-columns: 1fr auto; }
  .booking-row .when { grid-column: 1 / -1; }
  .weekday { grid-template-columns: 1fr; gap: 8px; }
  .bar { grid-template-columns: 100px 1fr 36px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .integration { grid-template-columns: 1fr; }
}

/* ---------- multi-account additions */
.sidebar .acct-name { font-size: 13px; color: var(--muted); padding: 0 10px 14px; margin-top: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; }
details.muted > summary { color: var(--muted); font-weight: 500; }
.step { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; }
.step:last-child { border-bottom: 0; }
.step:hover { background: var(--soft); }
.step .tickbox { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
.step.done .tickbox { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.done span:nth-child(2) { color: var(--muted); text-decoration: line-through; }
.step .go { color: var(--faint); font-size: 20px; }

/* ================================================================ diarydeck brand
   The wordmark is always lower case and always ink or paper, never the accent
   (brand guidelines, 02). The symbol is the calendar page with one day taken. */
.wordmark { font-family: var(--display); font-weight: 500; letter-spacing: 0; text-transform: lowercase; }
.lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.lockup img, .lockup svg { height: 1.15em; width: auto; flex: none; }

/* Auth pages */

/* Admin sidebar */

/* The booking page's big moments: the event name and the confirmation. */
.info h1 { font-size: 26px; font-weight: 500; }
.confirmation h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 500; }
.profile-head h1 { font-weight: 600; }

/* ================================================================ sign in and sign up
   Two panels rather than one card adrift in the middle of the screen: the brand holds
   the left, the form sits against it on the right, left-aligned and close-set. */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }

.auth-side { background: var(--brand); color: #fff; padding: 44px 48px;
             display: flex; flex-direction: column; justify-content: space-between; }
.auth-side .mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
                   color: #fff; font-family: var(--display); font-weight: 500; font-size: 22px;
                   text-transform: lowercase; letter-spacing: -.01em; }
.auth-side .mark img { height: 26px; width: auto; }
.auth-side .pitch { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px);
                    line-height: 1.12; letter-spacing: -.015em; margin: 0 0 14px; max-width: 13em; }
.auth-side .sub { color: rgba(255, 255, 255, .74); font-size: 15px; margin: 0; max-width: 30em; }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px;
                font-size: 13.5px; color: rgba(255, 255, 255, .74); }
.auth-side li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.auth-side li::before { content: "\2014"; color: rgba(255, 255, 255, .45); }

.auth-main { display: flex; align-items: center; justify-content: flex-start;
             padding: 44px 48px; background: var(--bg); }
.auth-form { width: 100%; max-width: 384px; }
.auth-form h1 { font-size: 27px; margin-bottom: 6px; }
.auth-form .intro { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; }
.auth-form .btn { margin-top: 4px; }
.auth-form .after { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.auth-form .after + .after { margin-top: 7px; }
/* The booking-page address reads as one control, not a caption beside a box. */
.slug-field { display: flex; align-items: stretch; border: 1px solid var(--line-strong);
              border-radius: var(--radius-sm); background: #fff; overflow: hidden;
              transition: border-color .14s ease, box-shadow .14s ease; }
.slug-field:focus-within { border-color: var(--brand);
                           box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.slug-field .prefix { display: flex; align-items: center; padding: 0 2px 0 11px; color: var(--faint);
                      font-size: 14px; white-space: nowrap; }
.slug-field input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
                    padding-left: 0 !important; min-width: 0; }

@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-side { padding: 22px 24px; flex-direction: row; align-items: center; gap: 16px; }
  .auth-side .pitch, .auth-side .sub, .auth-side ul { display: none; }
  .auth-main { padding: 36px 24px 56px; align-items: flex-start; }
  .auth-form { max-width: 440px; margin: 0 auto; }
}

/* ---------- brand preview (admin > Brand)
   A miniature of the booking page drawn with the proposed colours, so a business can see
   what it is agreeing to before anything is written to its account. The tokens are scoped
   to this block as --p-* so a preview of a dark brand can never leak into the admin. */
.brand-preview { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start;
                 margin-top: 18px; }
.bp-page { background: var(--p-paper); color: var(--p-ink); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 20px 18px; }
.bp-name { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
           opacity: .6; }
.bp-title { font-size: 19px; font-weight: 600; margin: 6px 0 2px; }
.bp-meta { font-size: 12px; opacity: .65; margin-bottom: 14px; }
.bp-slots { display: flex; gap: 6px; margin-bottom: 14px; }
.bp-slots span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 0;
                 border: 1px solid var(--p-brand); color: var(--p-brand);
                 border-radius: var(--p-radius); }
.bp-slots span.on { background: var(--p-brand); color: var(--p-paper); }
.bp-btn { background: var(--p-brand); color: var(--p-paper); text-align: center; font-weight: 600;
          font-size: 13px; padding: 10px 0; border-radius: var(--p-radius); }
.bp-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px 20px; }
.bp-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.bp-facts dd { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.bp-facts i { width: 15px; height: 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
              flex: none; }
.brand-thumb { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px;
               background: var(--card); display: grid; place-items: center; margin-bottom: 8px; }
.brand-thumb.logo img { max-height: 44px; max-width: 100%; }
.brand-thumb.photo img { max-height: 120px; max-width: 100%; border-radius: var(--radius-sm); }

@media (max-width: 720px) {
  .brand-preview { grid-template-columns: 1fr; }
}

/* The logo thumbnail mirrors the booking page: a pale logo is shown on its plate here too,
   so what the admin shows is what a client will actually see. */
.brand-thumb.logo img { max-height: 76px; }
.brand-thumb.logo.plate { background: var(--brand); }
.logo-size { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.logo-size .hint { margin-right: 4px; }
.logo-size .btn.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ---------- the lockup
   Icon plus the wordmark set live in Archivo SemiBold, lowercase, tracking -2% as the
   guidelines specify. Live text rather than the supplied logo SVG, whose <text> element
   falls back to the system sans inside an <img>, where our self-hosted font can't reach. */
.logo.lockup, .home-logo, .auth-side .mark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 600; letter-spacing: -.02em; text-transform: lowercase;
}
.home-logo { font-size: 21px; color: var(--ink); }
.home-logo img { height: 22px; width: auto; }
.auth-side .mark { font-size: 21px; color: #fff; }