/* The public pages, on the Nova app's stage: the dotted grey ground, white islands, the molten
   glass orb, one black pill for the action, blue text for the rest, orange only where something is
   chosen or needs you. Tokens and the orb are copied from styles.css (the app). No JavaScript. */
:root {
  --brand: #e0703a; --brand-hi: color-mix(in srgb, var(--brand) 18%, #fff); --brand-deep: color-mix(in srgb, var(--brand) 62%, #201409); --brand-ink: color-mix(in srgb, var(--brand) 78%, #201409);
  --orb-0: #e67438; --orb-42: #d66028; --orb-76: rgba(178, 70, 22, .62); --orb-92: rgba(255, 206, 160, .3);
  --orb-glow: rgba(240, 130, 55, .4); --orb-shade: rgba(112, 38, 8, .4); --orb-light: rgba(255, 222, 190, .42);
  --orb-core-a: rgba(255, 215, 154, .8); --orb-core-a2: rgba(247, 166, 102, .5); --orb-core-b: #ea6a2c; --orb-core-b2: rgba(192, 72, 20, .62);
  --orb-sheen: rgba(255, 236, 206, .5); --orb-sheen2: rgba(255, 186, 126, .3);
  --ink: #1d1d1f; --ink-soft: #6e6e73; --ink-faint: #98989d; --info: #1a5fd0; --danger: #b3261e;
  --paper: #f5f5f7; --card: #fff; --fill: #e9e9eb; --dots: rgba(0, 0, 0, .09); --hair: rgba(0, 0, 0, .08); --ring: rgba(0, 0, 0, .035);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root { --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73; --info: #6ea0ff; --paper: #161618; --card: #1f1f22; --fill: #2c2c2f; --dots: rgba(255, 255, 255, .08); --hair: rgba(255, 255, 255, .1); --ring: rgba(255, 255, 255, .06); --brand-ink: #f0a878; color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper) radial-gradient(var(--dots) 1.1px, transparent 1.2px) 0 0 / 14px 14px; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; }
.stage { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; flex-direction: column; gap: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--info); }

/* the orb, as in the app */
.orb { position: relative; display: block; flex: none; border-radius: 50%; user-select: none; width: 48px; height: 48px; }
.orb .glass { position: absolute; inset: 0; border-radius: 50%; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, var(--orb-0) 0%, var(--orb-42) 42%, var(--orb-76) 76%, var(--orb-92) 92%, rgba(255, 255, 255, .42) 100%);
  filter: saturate(1.3) contrast(1.06);
  box-shadow: 0 26px 54px -18px rgba(150, 62, 20, .5), 0 6px 16px -6px rgba(150, 62, 20, .34), 0 0 26px 5px var(--orb-glow), inset 0 0 0 1px rgba(255, 255, 255, .42), inset -7px -12px 26px var(--orb-light), inset 9px 13px 32px var(--orb-shade); }
.orb .core { position: absolute; inset: 5%; border-radius: 50%; overflow: hidden; opacity: .8; }
.orb .core::before, .orb .core::after { content: ""; position: absolute; border-radius: 50%; filter: blur(7px); }
.orb .core::before { inset: 4% 20% 34% 2%; background: radial-gradient(circle, var(--orb-core-a) 0%, var(--orb-core-a2) 45%, transparent 72%); }
.orb .core::after { inset: 32% 4% 2% 26%; background: radial-gradient(circle, var(--orb-core-b) 0%, var(--orb-core-b2) 48%, transparent 74%); }
.orb .sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 90%, var(--orb-sheen) 0%, transparent 34%), radial-gradient(circle at 78% 76%, var(--orb-sheen2) 0%, transparent 38%), linear-gradient(200deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 -3px 11px var(--orb-sheen), inset 0 7px 18px var(--orb-shade), inset 0 0 14px rgba(255, 255, 255, .26); }
.orb .spec { position: absolute; left: 21%; top: 14%; width: 25%; height: 17%; border-radius: 50%; pointer-events: none; rotate: -26deg; filter: blur(.6px);
  background: radial-gradient(ellipse at 44% 40%, #fff 0%, rgba(255, 255, 255, .86) 30%, rgba(255, 255, 255, .28) 58%, rgba(255, 255, 255, 0) 76%); }
.orb .spec2 { position: absolute; right: 16%; bottom: 19%; width: 16%; height: 11%; border-radius: 50%; pointer-events: none; filter: blur(1.2px); background: radial-gradient(circle, rgba(255, 244, 228, .8), rgba(255, 244, 228, 0) 70%); }
.orb::before { content: ""; position: absolute; inset: -34%; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }
.orb::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -13%; height: 13%; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand-deep) 35%, transparent), transparent 72%); }
.orb.sm { width: 28px; height: 28px; } .orb.sm .glass { box-shadow: 0 4px 10px -4px rgba(150, 62, 20, .5), 0 0 8px 1px var(--orb-glow), inset 0 0 0 1px rgba(255, 255, 255, .4), inset -2px -3px 6px var(--orb-light), inset 2px 3px 8px var(--orb-shade); } .orb.sm .core::before, .orb.sm .core::after { filter: blur(2.5px); } .orb.sm::before, .orb.sm::after { display: none; }
.orb.lg { width: 88px; height: 88px; }
/* a photo takes the orb's place, in the same frame */
.photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .35), 0 0 0 4px var(--card); }

/* the top row: round buttons like the app's corners */
.top { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.rb { width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 1px var(--ring); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; font-size: 18px; line-height: 1; }
.rb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the header: orb or photo above the name, centred, like Home */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 0 2px; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.hero p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14.5px; max-width: 34ch; }

/* islands */
.paper { background: var(--card); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 0 0 1px var(--ring); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.k .link { float: right; text-transform: none; letter-spacing: 0; font-weight: 500; }
.link { color: var(--info); text-decoration: none; font-weight: 500; }
.notice { margin: 0; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand-ink); font-size: 14px; }
.note { font-size: 13px; color: var(--ink-soft); margin: 0; }
.about { font-size: 14.5px; margin: 0; }
.next { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.next b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .next .sub { color: var(--ink-soft); font-size: 13px; }
.rows { display: flex; gap: 8px; align-items: center; }
.rows > * { flex: 1; min-height: 40px; font: inherit; font-size: 14px; font-weight: 500; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; cursor: pointer; padding: 0 14px; }
.rows > a, .rows > button { background: var(--ink); color: var(--card); }
.rows .quiet { background: var(--fill); color: var(--ink); font-weight: 500; }
.rows > *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
ul.plan, ul.links { list-style: none; margin: 0; padding: 0; }
.plan li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; } .plan li + li { border-top: 1px solid var(--hair); }
.plan b { font-size: 14.5px; font-weight: 500; } .plan .when { display: block; font-size: 12.5px; color: var(--ink-soft); } .plan .price { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.links li { padding: 6px 0; } .links a { text-decoration: none; font-size: 14.5px; } .links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* the one action: a black pill */
.pill, .cta { display: block; width: 100%; text-align: center; font: inherit; font-size: 15px; font-weight: 600; color: var(--card); background: var(--ink); border: 0; border-radius: 999px; padding: 13px 16px; text-decoration: none; cursor: pointer; }
.pill:active, .cta:active { transform: scale(.985); }
.pill:focus-visible, .cta:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* the composer-like ask box */
.ask { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 0 0 1px var(--ring); padding: 8px 8px 8px 16px; flex-wrap: wrap; position: relative; overflow: hidden; }
.ask::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 90px; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); pointer-events: none; }
.ask input { flex: 1 1 160px; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; position: relative; }
.ask input:focus { outline: none; } .ask:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.ask .send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); font-size: 16px; cursor: pointer; position: relative; }
.tell { display: flex; flex-direction: column; gap: 8px; } .tell label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.tell input { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--fill); color: var(--ink); }
.form { display: flex; flex-direction: column; gap: 10px; } .form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.form input, .form textarea, .form select { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--fill); color: var(--ink); } .form textarea { min-height: 64px; resize: vertical; }
.ok { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 16px 0 6px; } .ok h2 { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .ok p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.foot { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; } .foot a { color: var(--ink-soft); }

/* Booking: the week strip and the day's timeline */
.svcline { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); padding: 0 4px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wd { background: var(--card); border-radius: 14px; padding: 8px 0 7px; text-align: center; display: grid; gap: 1px; box-shadow: 0 0 0 1px var(--ring); text-decoration: none; color: var(--ink); }
.wd small { font-size: 9.5px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.wd b { font-size: 15px; font-variant-numeric: tabular-nums; }
.wd i { font-style: normal; font-size: 9.5px; color: var(--brand-ink); font-weight: 600; min-height: 12px; }
.wd.off { opacity: .4; }
.wd.sel { background: var(--ink); color: var(--card); } .wd.sel small, .wd.sel i { color: color-mix(in srgb, var(--card) 70%, transparent); }
.wd.today b { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.wd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.weeknav { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; font-size: 13.5px; font-weight: 600; }
.weeknav .rb { width: 30px; height: 30px; font-size: 16px; } .weeknav .rb.off { opacity: .3; pointer-events: none; }
.tl { display: grid; gap: 6px; }
.tl .row { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; }
.tl .h { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tl .s { border-radius: 12px; padding: 10px 12px; background: var(--fill); color: var(--ink); font-weight: 500; text-decoration: none; display: block; font-size: 14px; }
.tl .s.busy { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-faint); font-weight: 400; }
.tl .s.on { background: color-mix(in srgb, var(--brand) 16%, var(--fill)); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.tl .s:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.grid { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { min-height: 36px; padding: 0 14px; border-radius: 12px; background: var(--fill); color: var(--ink); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.slot.on { background: color-mix(in srgb, var(--brand) 16%, var(--fill)); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }

/* Visitor chat */
.chatlink { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.chatlink span:first-of-type { flex: 1; font-weight: 600; }
.chatlink .go { color: var(--brand-ink); }
.thread { display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg.me { align-self: flex-end; background: var(--fill); border-bottom-right-radius: 6px; }
.msg.nara { align-self: flex-start; background: var(--card); box-shadow: 0 0 0 1px var(--ring); border-bottom-left-radius: 6px; }

/* The directory */
.hit { display: flex; flex-direction: column; gap: 10px; }
.hit h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.hit .sub { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.hit .svc { margin: 6px 0 0; font-size: 14px; }

/* Powered by Nutch: the logo with the glass orb, at the foot of every public page */
.powered { display: inline-flex; align-items: center; gap: 7px; margin: 6px auto 0; color: var(--ink-faint); font-size: 12px; text-decoration: none; align-self: center; }
.powered img { height: 20px; width: auto; }
.powered:hover { color: var(--ink-soft); }

/* Group link page (/g/<token>): tap every time that works, then Send */
.gl form { display: grid; gap: 12px; margin-top: 12px; }
.gl .zone { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.pickt { position: relative; min-height: 40px; cursor: pointer; }
.pickt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pickt:has(input:checked) { background: color-mix(in srgb, var(--brand) 16%, var(--fill)); color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pickt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.gl-rows { margin-top: 4px; }