/* ============================================================
   CakeQ - stylesheet (v4, brand identity)

   Palette taken from the CakeQ logo and mockups:
     cream    #FDFCFA   the paper everything sits on
     blush    #F5EDEB   soft panels, the assistant's voice
     rose     #B96773   actions and the customer's voice
     petal    #D08F9B   the Q, quiet accents
     cocoa    #4A2E27   headings and body ink
     taupe    #8A7A75   secondary text

   Type: DM Serif Display for the elegant voice, Inter for
   everything functional. See --font-display / --font-ui below.
   ============================================================ */

:root {
  --cream:  #FDFCFA;
  --blush:  #F5EDEB;
  --blush-deep: #EFE0DE;
  --rose:   #B96773;
  --rose-dark: #9E4F5B;
  --petal:  #D08F9B;
  --cocoa:  #4A2E27;
  --taupe:  #8A7A75;
  --line:   #E8DBD8;
  --white:  #FFFFFF;
  --green:  #5B7355;
  --amber:  #8A6314;
  --amber-bg: #F7EFDC;

  /* Two typefaces, two jobs.
     DM Serif Display carries the voice: page titles, the bakery
     name, the lines meant to feel like a bakery.
     Inter carries the work: numbers, dates, amounts, buttons,
     menus, forms and everything the assistant says, where being
     read correctly at a glance matters more than character. */
  /* Crimson Pro for the voice: a light, elegant serif with the same
     unhurried feel as the CakeQ wordmark, with none of the mannered
     shapes that made the last one distracting. It sets small and
     fine, so headings below run at 600 and a size up to hold their
     weight.
     Source Sans 3 for the work: drawn for interfaces rather than for
     branding, with open shapes and unambiguous figures, which is what
     makes a date, a price or a phone number readable at a glance in a
     kitchen. */
  --font-display: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* One shadow, spent on the single thing that should float: the
     confirmation a customer sees when their request goes in. Putting
     the same soft grey under every card is what made the workspace
     read as a template. */
  --lift: 0 2px 4px rgba(74, 46, 39, .05), 0 12px 32px rgba(74, 46, 39, .07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  /* Crimson Pro defaults to old-style figures, where digits sit at
     different heights. Fine in a paragraph, wrong in a heading that
     carries a year or a count. */
  font-variant-numeric: lining-nums;
  margin: 0 0 0.35em;
}
h1 { font-size: clamp(2.1rem, 6vw, 2.9rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.22rem; }

p { margin: 0 0 1em; }
a { color: var(--rose-dark); }

.muted { color: var(--taupe); font-size: 0.92rem; }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }

/* ---------- logo ---------- */
.logo { display: block; height: 46px; width: auto; }
.logo-sm { height: 34px; }
.logo-lg { height: 68px; }

/* ---------- buttons ---------- */
button, .btn {
  font-family: inherit;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  background: var(--rose);
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.01em;
}
button:hover { background: var(--rose-dark); }
button:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
button.ghost {
  background: transparent;
  color: var(--rose-dark);
  border: 1px solid var(--petal);
}
button.ghost:hover { background: var(--blush); }
button.plain {
  background: transparent; color: var(--taupe);
  padding: 8px 12px; border-radius: var(--r-sm);
}
button.plain:hover { background: var(--blush); color: var(--cocoa); }

/* ---------- forms ---------- */
label {
  display: block;
  font-size: 0.85rem;
  color: var(--taupe);
  margin: 16px 0 5px;
  letter-spacing: 0.02em;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--cocoa);
  font: inherit;
}
textarea { min-height: 78px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--petal);
  box-shadow: 0 0 0 3px var(--blush);
}

/* ---------- layout ---------- */
.wrap { max-width: 660px; margin: 0 auto; padding: 20px 20px 64px; }

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1180px;
  margin: 0 auto;
}

/* A plain grouping surface. Flat by default: hierarchy comes from
   space and rules, not from stacking shadows. */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  margin: 16px 0;
}

.notice { border-radius: var(--r-sm); padding: 11px 16px; margin: 12px 0; font-size: 0.93rem; }
.notice.ok   { background: #EAF0E7; color: var(--green); }
.notice.err  { background: #FAE7E9; color: var(--rose-dark); }
.notice.info { background: var(--amber-bg); color: var(--amber); }

footer.site { text-align: center; padding: 28px; color: var(--taupe); font-size: 0.82rem; }

/* ---------- landing ---------- */
.hero {
  background: var(--blush);
  border-radius: var(--r-lg);
  padding: 40px 28px 36px;
  margin: 8px 0 26px;
}
.hero h1 { max-width: 12ch; }
.hero p { max-width: 46ch; color: #7A5F58; }

.steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.steps li:first-child { border-top: none; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--petal);
  min-width: 26px;
  line-height: 1.2;
}

/* ---------- share link box ---------- */
.linkbox {
  background: var(--blush);
  border-radius: var(--r-md);
  padding: 22px;
  margin: 18px 0;
}
.linkbox .url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
  background: var(--white);
  border: 1px dashed var(--petal);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  word-break: break-all;
  margin: 12px 0;
}

/* ============================================================
   Customer chat
   ============================================================ */

.chat-body { display: flex; flex-direction: column; min-height: 100vh; }
.chat-wrap {
  flex: 1; width: 100%; max-width: 620px;
  margin: 0 auto; padding: 0 14px;
  display: flex; flex-direction: column; min-height: 0;
}

.chat-head { padding: 18px 4px 12px; text-align: center; }
.chat-head .bakery {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  margin: 10px 0 2px;
}

/* progress: which details the assistant already has */
.progress { padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.progress-track {
  height: 4px; border-radius: var(--r-pill);
  background: var(--blush-deep); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--rose);
  border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: no-preference) {
  .progress-fill { transition: width .4s ease; }
}
.progress-label {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--taupe);
  margin-top: 7px; letter-spacing: .02em;
}

.thread {
  flex: 1; overflow-y: auto;
  padding: 18px 2px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 300px;
}
.row-user { display: flex; justify-content: flex-end; }
.row-assistant { display: flex; justify-content: flex-start; }

.bubble {
  max-width: 84%;
  padding: 12px 16px;
  font-size: 0.96rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.bubble-assistant {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 5px;
}
.bubble-user {
  background: var(--rose);
  color: var(--white);
  border-radius: var(--r-md) var(--r-md) 5px var(--r-md);
}
.bubble-img { display: block; max-width: 100%; border-radius: var(--r-sm); margin-bottom: 8px; }

.typing span {
  display: inline-block; width: 6px; height: 6px;
  margin-right: 4px; border-radius: 50%;
  background: var(--petal); opacity: .4;
}
@media (prefers-reduced-motion: no-preference) {
  .typing span { animation: blink 1.2s infinite; }
  .typing span:nth-child(2) { animation-delay: .2s; }
  .typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%,100% { opacity:.25 } 50% { opacity:.9 } }
}

.composer { padding: 12px 2px 18px; border-top: 1px solid var(--line); }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea {
  flex: 1; min-height: 46px; max-height: 150px;
  border-radius: var(--r-md);
}
button.attach {
  width: 46px; height: 46px; padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--petal);
  color: var(--rose-dark);
  font-size: 1.5rem; line-height: 1;
  flex-shrink: 0;
}
button.attach:hover { background: var(--blush); }

.send-cta {
  margin: 0 0 10px;
  text-align: center;
}
.send-cta button { width: 100%; }
.send-cta .hint {
  display: block; font-size: .78rem; color: var(--taupe); margin-top: 6px;
}

.attach-wrap { position: relative; display: inline-block; margin-bottom: 8px; }
.attach-wrap img { height: 62px; border-radius: var(--r-sm); display: block; border: 1px solid var(--line); }
.attach-wrap button {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%; background: var(--cocoa); color: #fff;
  font-size: .8rem; line-height: 1;
}

/* review card shown when the request is sent */
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px;
  margin: 8px 0 18px;
  box-shadow: var(--lift);
}
.review .seal {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blush); color: var(--rose-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 12px;
}
.review h2 { text-align: center; }
.review .sub { text-align: center; color: var(--taupe); font-size: .92rem; margin-bottom: 18px; }
.review dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 0; font-size: .93rem; }
.review dt { color: var(--taupe); }
.review dd { margin: 0; }
.review img.ref { max-width: 100%; border-radius: var(--r-sm); margin-top: 14px; }

/* ============================================================
   Baker dashboard
   ============================================================ */

.tabs { display: flex; gap: 8px; margin: 18px 0 6px; flex-wrap: wrap; }
.tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--taupe);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: .9rem;
}
.tab:hover { background: var(--blush); color: var(--cocoa); }
.tab[aria-selected="true"] {
  background: var(--blush);
  border-color: var(--petal);
  color: var(--rose-dark);
}
.tab .count {
  display: inline-block;
  min-width: 22px; margin-left: 8px;
  background: var(--rose); color: var(--white);
  border-radius: var(--r-pill);
  font-size: .76rem; padding: 1px 7px;
}
.tab[aria-selected="false"] .count { background: var(--blush-deep); color: var(--taupe); }

/* ============================================================
   A request is a ticket, not a card. The rail down its left edge
   carries the state, so a stack of them can be read without
   stopping to parse a badge on each one.
   ============================================================ */

.ticket {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 20px 20px;
  /* Tickets are separate pieces of work, so they get real air between
     them rather than stacking into one wall of text. */
  margin: 0 0 22px;
}
.ticket:last-child { margin-bottom: 0; }
.tk-pending  { border-left-color: var(--rose); }
.tk-quoted   { border-left-color: var(--petal); }
.tk-accepted { border-left-color: var(--green); }
.tk-rejected,
.tk-discarded { border-left-color: var(--line); opacity: .72; }

.tk-new { background: #FFFBF7; }

.tk-top { display: flex; gap: 14px; align-items: flex-start; }

/* The date is the loudest thing on the ticket. */
.tk-date {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  padding: 6px 0 7px;
  background: var(--blush);
  border-radius: var(--r-sm);
}
.tk-date .d {
  display: block;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cocoa);
}
.tk-date .m {
  display: block;
  font-size: .72rem;
  color: var(--taupe);
  margin-top: 3px;
}
.tk-date-none {
  font-size: .72rem;
  color: var(--taupe);
  line-height: 1.25;
  padding: 10px 0;
}

.tk-who { flex: 1; min-width: 0; }
.tk-who h3 { margin: 2px 0 3px; font-size: 1.15rem; }
.tk-who p { margin: 0; font-size: .9rem; color: var(--taupe); line-height: 1.45; }
.tk-status { margin-top: 3px !important; color: var(--rose-dark) !important; }

.tk-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
  margin-left: 8px;
  vertical-align: middle;
}

.tk-edit { flex-shrink: 0; align-self: flex-start; }

/* Details on the left, the cake they pointed at on the right, both
   starting on the same line. */
.tk-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tk-body.has-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 20px;
  align-items: start;
}
.tk-info { min-width: 0; }

.tk-detail {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: .9rem;
}
.tk-detail:empty { display: none; }
.tk-detail dt { color: var(--taupe); }
.tk-detail dd { margin: 0; }

.tk-figure { margin: 0; }
.tk-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.tk-figure figcaption {
  font-size: .76rem;
  color: var(--taupe);
  margin-top: 6px;
  text-align: center;
}

@media (max-width: 700px) {
  .tk-body.has-photo { grid-template-columns: 1fr; gap: 14px; }
  .tk-figure img { aspect-ratio: 4 / 3; }
}

.tk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tk-actions input { max-width: 140px; }

.tk-hint { margin: 10px 0 0; font-size: .82rem; color: var(--taupe); }

.req.editing {
  background: var(--white);
  border: 1px solid var(--petal);
  border-radius: var(--r-sm);
  padding: 18px;
  margin: 10px 0;
}

.pill {
  display: inline-block; font-size: .74rem;
  padding: 3px 11px; border-radius: var(--r-pill);
  letter-spacing: .03em; vertical-align: middle;
}
.pill-pending  { background: var(--amber-bg); color: var(--amber); }
.pill-quoted   { background: var(--blush); color: var(--rose-dark); }
.pill-accepted { background: #EAF0E7; color: var(--green); }
.pill-rejected,
.pill-discarded { background: #F0EBEA; color: var(--taupe); }

.empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--blush);
  border-radius: var(--r-md);
  color: #7A5F58;
}
.empty h3 { font-size: 1.3rem; }
.empty p { max-width: 42ch; margin-left: auto; margin-right: auto; }
.empty h3 { margin-bottom: 6px; }

.promo {
  background: var(--blush);
  border-radius: var(--r-md);
  padding: 26px;
  margin-top: 26px;
}
.promo h2 { max-width: 14ch; margin-bottom: 6px; }
.promo p { color: #7A5F58; margin: 0; }

/* v6: the baker's own notes and the edit form on a request */
.baker-note {
  background: var(--blush);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: .92rem;
  white-space: pre-wrap;
}
.note-label {
  display: block;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--rose-dark);
  margin-bottom: 4px;
}
.req.editing { border-color: var(--petal); }
.req.editing label:first-of-type { margin-top: 6px; }

/* ============================================================
   v7: the baker's workspace - sidebar shell
   Desktop: a fixed rail on the left.
   Mobile: the same rail slides in over the page from a hamburger.
   ============================================================ */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--white);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 20px; }
.nav-close { display: none; font-size: 1.4rem; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  background: transparent;
  color: var(--cocoa);
  text-align: left;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-item:hover { background: var(--blush); }
.nav-item[aria-current="true"] {
  background: var(--blush);
  color: var(--rose-dark);
}
.nav-count {
  background: var(--rose); color: var(--white);
  border-radius: var(--r-pill);
  font-size: .74rem; padding: 1px 8px; min-width: 22px; text-align: center;
}
.nav-count.zero { background: transparent; color: var(--taupe); }

.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 10px; padding: 6px; font-size: .9rem; }
.who-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blush); color: var(--rose-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  flex-shrink: 0;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nav-open { font-size: 1.2rem; }
.content { padding: 26px 28px 72px; max-width: 900px; width: 100%; }

.scrim {
  position: fixed; inset: 0;
  background: rgba(74, 46, 39, .35);
  z-index: 9;
}

@media (max-width: 820px) {
  .sidebar {
    position: fixed; z-index: 10; left: 0; top: 0;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(74,46,39,.18);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-close { display: block; }
  .topbar { display: flex; }
  .content { padding: 20px 16px 64px; }
  @media (prefers-reduced-motion: no-preference) {
    .sidebar { transition: transform .22s ease; }
  }
}
@media (min-width: 821px) {
  .scrim { display: none !important; }
  .topbar-logo { display: none; }
}

/* ---------- home ---------- */
.greet { color: var(--taupe); margin-bottom: 2px; font-size: .95rem; }
#sec-home h1 { margin-bottom: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.stat {
  background: transparent;
  border: none;
  border-top: 2px solid var(--blush-deep);
  border-radius: 0;
  padding: 12px 0 0;
}
.stat .n {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--rose-dark);
}
.stat .k { font-size: .84rem; color: var(--taupe); margin-top: 5px; }

.upcoming { margin: 0; padding: 0; list-style: none; }
.upcoming li {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.upcoming li:first-child { border-top: none; }
.up-date {
  min-width: 62px; text-align: center;
  background: var(--blush); border-radius: var(--r-sm); padding: 6px 4px;
}
.up-date .d { font-family: var(--font-ui); font-weight: 600; font-size: 1.15rem; line-height: 1.1; }
.up-date .m { font-size: .68rem; color: var(--taupe); letter-spacing: .06em; }

/* ============================================================
   Calendar

   A month a baker can read without tapping: whose cake, how many,
   and which days are shut. Days with work are the filled ones, so
   a busy week shows up as a shape before any text is read.
   ============================================================ */

.cal-head {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 22px 0 14px;
}
.cal-head h2 { margin: 0; min-width: 9ch; text-align: center; }
.cal-arrow { font-size: 1.4rem; line-height: 1; padding: 4px 12px; border-radius: var(--r-pill); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: .74rem; color: var(--taupe); text-align: left; padding: 0 4px 6px; }

.cal-day {
  position: relative;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  padding: 7px 8px;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  text-align: left; cursor: pointer; color: var(--cocoa); overflow: hidden;
}
/* The base button rule paints a solid rose on hover, which turned a
   whole day cell dark. A calendar cell is a surface, not a button
   face, so it gets its own hover: a light wash and a warmer edge. */
.cal-day:hover,
.cal-day:focus-visible {
  background: var(--blush);
  border-color: var(--rose);
}
.cal-day.empty { border: none; background: transparent; cursor: default; min-height: 0; }

.cal-num { font-size: .84rem; font-weight: 500; color: var(--taupe); }

/* A day with cakes is marked by its edge, not by a block of colour:
   filling the cell drowned the names it was supposed to highlight. */
.cal-day.has-orders {
  background: var(--white);
  border-color: var(--petal);
}
.cal-day.has-orders .cal-num { color: var(--cocoa); font-weight: 600; }
.cal-day.has-orders:hover { background: var(--blush); border-color: var(--rose); }

.cal-names { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-name {
  font-size: .74rem; line-height: 1.3;
  padding: 2px 6px; border-radius: 4px;
  background: var(--rose); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Quoted but unanswered: outlined, because it is not yours to bake
   until the customer says yes. */
.cal-name.pend { background: transparent; color: var(--rose-dark); border: 1px solid var(--petal); }
.cal-more { font-size: .7rem; color: var(--rose-dark); padding-left: 2px; }

.cal-count { display: none; }

.cal-day.is-today { border-color: var(--cocoa); box-shadow: inset 0 0 0 1px var(--cocoa); }
.cal-day.is-closed {
  background: repeating-linear-gradient(-45deg, #F6F2F1, #F6F2F1 5px, #EFE9E8 5px, #EFE9E8 10px);
  border-color: var(--line);
}
.cal-day.is-closed:hover { border-color: var(--taupe); }
.cal-day.is-closed .cal-num { color: var(--taupe); }
.cal-day.is-open { border-color: var(--rose); box-shadow: inset 0 0 0 2px var(--rose); }

.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: .82rem; color: var(--taupe); }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -2px; }
.cal-legend .sw-order  { background: var(--rose); }
.cal-legend .sw-quoted { background: transparent; border: 1px solid var(--petal); }
.cal-legend .sw-closed { background: repeating-linear-gradient(-45deg, #F3EEED, #F3EEED 3px, #EDE6E5 3px, #EDE6E5 6px); }

/* The day panel answers a tap, so it is allowed to move. */
#cal-detail:not(:empty) { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  #cal-detail > .card { animation: day-open .22s ease-out; }
  @keyframes day-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  .cal-day { transition: border-color .12s ease, background .12s ease; }
}

/* On a phone the names do not fit: the day carries a count instead,
   and tapping opens the full list underneath as before. */
@media (max-width: 620px) {
  .cal-grid { gap: 4px; }
  .cal-day { min-height: 52px; padding: 5px; }
  .cal-names { display: none; }
  .cal-count {
    display: block; font-size: .68rem;
    background: var(--rose); color: #fff;
    border-radius: var(--r-pill); padding: 0 6px; align-self: flex-start;
  }
  .cal-dow { text-align: center; font-size: .68rem; }
}

/* settings summary lists */
.review-dl { display: grid; grid-template-columns: 200px 1fr; gap: 9px 14px; margin: 12px 0 0; font-size: .93rem; }
.review-dl dt { color: var(--taupe); }
.review-dl dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 560px) {
  .review-dl, .req dl { grid-template-columns: 1fr; gap: 2px 0; }
  .review-dl dt, .req dt { margin-top: 8px; }
}

/* v9: reveal the password while typing it */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--taupe);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-size: .84rem;
  letter-spacing: .02em;
}
.pw-toggle:hover { background: var(--blush); color: var(--rose-dark); }
.pw-toggle[aria-pressed="true"] { color: var(--rose-dark); }

/* v12: a finished chat offers one deliberate way onward */
.again {
  text-align: center;
  padding: 6px 0 20px;
}
.again p { margin: 0 0 10px; font-size: .88rem; }

/* v13: the line that closes the page for good */
.closing-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--taupe);
  text-align: center;
}

/* v14: a day opens to its cakes, each one collapsed until you ask */
.day-list { margin-top: 12px; }
.day-item {
  border-bottom: 1px solid var(--line);
  margin: 0;
  overflow: hidden;
  background: transparent;
}
.day-item:last-child { border-bottom: none; }
.day-item.open { background: var(--blush); }

.day-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  color: var(--cocoa);
  border-radius: 0;
  padding: 12px 14px;
  font-size: .93rem;
}
.day-head:hover { background: var(--blush); }
.day-caret { color: var(--petal); font-size: .8rem; flex-shrink: 0; }
.day-head .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.day-line {
  font-size: .82rem;
  color: var(--taupe);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-body {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line);
}
.day-body dl {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 7px 12px;
  margin: 12px 0 0;
  font-size: .9rem;
}
.day-body dt { color: var(--taupe); }
.day-body dd { margin: 0; }
@media (max-width: 560px) {
  .day-body dl { grid-template-columns: 1fr; gap: 2px 0; }
  .day-body dt { margin-top: 8px; }
}

/* v15: choosing which languages a baker shares links in */
.lang-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; margin-top: 4px; }
.lang-opt {
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: .92rem; color: var(--cocoa);
  cursor: pointer;
}
.lang-opt:hover { background: var(--blush); }
.lang-opt input { width: auto; margin: 0; accent-color: var(--rose); }
.lang-opt .muted { font-size: .84rem; }

/* v16: right-to-left languages (Arabic, Urdu) */
[dir="rtl"] .bubble-assistant { border-radius: var(--r-md) var(--r-md) 5px var(--r-md); }
[dir="rtl"] .bubble-user      { border-radius: var(--r-md) var(--r-md) var(--r-md) 5px; }
[dir="rtl"] .progress-label   { direction: rtl; }
[dir="rtl"] .review dl        { direction: rtl; }

/* v17: the page after the request is sent - confirmation only */
.done-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 0 24px;
}
.done-wrap .review { margin: 0 0 18px; }

/* Sidebar: the current section is marked by a rule, not a filled
   pill on every hover state. Quieter, and it survives the eye
   scanning past it. */
.nav-item[aria-current="true"] {
  background: var(--blush);
  box-shadow: inset 3px 0 0 var(--rose);
}

/* ============================================================
   My link: one compact row per language. The link is the thing
   you came for; the message you paste is there but folded, so a
   baker serving four languages sees four links on one screen
   instead of scrolling past four blocks of prose.
   ============================================================ */

.lnk {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--white);
}
.lnk-head { display: flex; align-items: baseline; gap: 10px; }
.lnk-head h2 { margin: 0; font-size: 1.15rem; }
.lnk-native { font-size: .85rem; color: var(--taupe); }

.lnk-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  color: var(--rose-dark);
  word-break: break-all;
  margin: 6px 0 12px;
}

.lnk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lnk-actions button { padding: 8px 16px; font-size: .88rem; }
.lnk-sep { flex: 1; min-width: 0; }

.lnk-msg { margin-top: 12px; }
.lnk-msg summary {
  font-size: .85rem;
  color: var(--taupe);
  cursor: pointer;
  list-style: none;
}
.lnk-msg summary::-webkit-details-marker { display: none; }
.lnk-msg summary::before { content: "+ "; color: var(--petal); }
.lnk-msg[open] summary::before { content: "- "; }
.lnk-msg textarea { margin-top: 8px; font-size: .88rem; }

@media (max-width: 620px) {
  .lnk-sep { display: none; }
}

/* A settings group being edited is marked, so with three cards on
   screen it is obvious which one your Save applies to. */
.card.editing {
  border-color: var(--petal);
  background: #FFFDFC;
}

/* ============================================================
   The signed-out pages: sign in, confirm email, first setup.

   This is the only screen a baker sees before they trust the
   product with their business, so it reads rather than
   interrogates. The logo is given room, the opening paragraph is
   set in the serif at a book's measure and leading, and the form
   sits below the sentence that earned it.
   ============================================================ */

.gate {
  max-width: 620px;
  margin: 0 auto;
  padding: 12px 22px 80px;
}

.gate-brand { text-align: center; padding: 40px 0 10px; }
.gate-logo { width: 260px; max-width: 74%; height: auto; }

.gate h1 {
  text-align: center;
  margin: 26px 0 14px;
  font-size: clamp(2.4rem, 8vw, 3.2rem);
}

/* A book's proportions: serif, generous leading, and a measure
   short enough that the eye finds the next line on its own. */
.lede {
  font-family: var(--font-display);
  font-size: 1.24rem;
  line-height: 1.62;
  color: #6B4F48;
  max-width: 56ch;
  margin: 0 auto 30px;
  text-align: center;
}
.lede strong { font-weight: 600; color: var(--cocoa); }

.gate-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px;
  margin: 0;
}
.gate-card .row { justify-content: center; }

.gate-note {
  max-width: 46ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--taupe);
}

/* The first-run setup is a long form, so it keeps a working width
   and left-aligned prose rather than the centred welcome. */
#view-setup .lede { text-align: left; margin-left: 0; }
#view-setup h1 { text-align: left; }

@media (max-width: 560px) {
  .gate { padding: 8px 18px 60px; }
  .gate-brand { padding: 28px 0 4px; }
  .lede { font-size: 1.12rem; }
  .gate-card { padding: 20px 18px; }
}

/* The product name inside a sentence, carrying the logo's own two
   colours so it reads as the thing doing the work. */
.brand-mark {
  font-weight: 600;
  color: var(--cocoa);
  white-space: nowrap;
}
.brand-mark span { color: var(--petal); }

/* "Welcome" takes the colour of the Q, so the page opens on the
   brand rather than on plain ink. */
.gate h1 { color: var(--rose-dark); }

/* Right to left on the way in, for Arabic and Urdu. */
[dir="rtl"] .lede,
[dir="rtl"] .gate-note { text-align: center; }
[dir="rtl"] .pw-wrap input { padding-right: 14px; padding-left: 76px; }
[dir="rtl"] .pw-toggle { right: auto; left: 6px; }
[dir="rtl"] #view-setup .lede,
[dir="rtl"] #view-setup h1 { text-align: right; }


/* ============================================================
   The language picker: one button that opens the list.

   Filled rose on every option turned the top of the welcome into
   a block of colour louder than the welcome itself. These are
   choices, not calls to action: a rose edge, a barely-there rose
   inside, and the fill only deepens under the cursor.
   ============================================================ */

/* The list opens in the flow of the page rather than floating over
   it, so nothing below is covered and it is obvious where it came
   from. The page grows, then shrinks again when it closes. */
.gate-langs {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FDF7F8;
  color: var(--rose-dark);
  border: 1px solid var(--petal);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: .9rem;
  line-height: 1.2;
}
.lang-btn:hover {
  background: var(--blush);
  border-color: var(--rose);
}
.lang-globe { color: var(--petal); font-size: .78rem; }
.lang-caret { font-size: .62rem; color: var(--petal); }

.lang-menu {
  width: 100%;
  max-width: 430px;
  margin-top: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(136px, 1fr));
  gap: 6px;
}

.lang-item {
  background: #FDF7F8;
  color: var(--cocoa);
  border: 1px solid var(--petal);
  border-radius: var(--r-pill);
  text-align: center;
  padding: 9px 14px;
  font-size: .9rem;
  line-height: 1.2;
}
.lang-item:hover {
  background: var(--blush);
  border-color: var(--rose);
  color: var(--rose-dark);
}
.lang-item.on {
  background: var(--blush);
  border-color: var(--rose);
  color: var(--rose-dark);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .lang-btn, .lang-item { transition: background .13s ease, border-color .13s ease; }
  /* The list answers a click, so it is allowed to move. */
  .lang-menu { animation: langs-open .18s ease-out; }
  @keyframes langs-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

@media (max-width: 460px) {
  .lang-menu { grid-template-columns: 1fr; min-width: 200px; }
}

/* Right to left on the way in, for Arabic and Urdu. */
[dir="rtl"] .lede,
[dir="rtl"] .gate-note { text-align: center; }
[dir="rtl"] .pw-wrap input { padding-right: 14px; padding-left: 76px; }
[dir="rtl"] .pw-toggle { right: auto; left: 6px; }
[dir="rtl"] #view-setup .lede,
[dir="rtl"] #view-setup h1 { text-align: right; }

/* ============================================================
   The cakes that are due.

   This is the one thing on Home that is genuinely urgent, so it
   sits above everything and is the only block on the page with a
   filled background. Everything else can wait until tomorrow;
   these cannot.
   ============================================================ */

.due {
  background: var(--blush);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 4px 0 22px;
}
.due h2 { margin: 0 0 12px; color: var(--rose-dark); }
.due ul { list-style: none; margin: 0; padding: 0; }
.due li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--blush-deep);
}
.due li:first-child { border-top: none; }

.due-when {
  flex-shrink: 0;
  min-width: 82px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--rose-dark);
}
.due-what { flex: 1; min-width: 0; }
.due-what strong { font-weight: 600; }
.due-detail {
  display: block;
  font-size: .86rem;
  color: #7A5F58;
  line-height: 1.45;
}
.due li button { flex-shrink: 0; }

@media (max-width: 560px) {
  .due li { flex-wrap: wrap; }
  .due-when { min-width: 0; }
  .due-what { flex-basis: 100%; order: 3; }
}

/* A day inside the warning window is ringed on the calendar, using
   the same window as the reminder so the two never disagree. */
.cal-day.is-soon {
  border-color: var(--rose);
  background: var(--blush);
}
.cal-day.is-soon .cal-num { color: var(--rose-dark); }

/* v39: the same sender behind several tickets, and a likely duplicate. */
.tk-sender { margin: 4px 0 0; font-size: .8rem; color: var(--taupe); }
.tk-dup { color: var(--rose); font-weight: 600; }

/* v42: the structured menu in setup and Settings. */
.taglist { margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 12px; border-radius: 999px;
  background: var(--blush); border: 1px solid var(--petal);
  font-size: .9rem; color: var(--cocoa);
}
.tag button { all: unset; cursor: pointer; color: var(--taupe); font-size: 1.05rem; line-height: 1; padding: 0 2px; }
.tag button:hover { color: var(--rose); }
.tag-add { display: flex; gap: 8px; align-items: center; }
.tag-add input { margin: 0; }
.tag-add button { white-space: nowrap; }
.sizes { margin-top: 4px; }
.size-head, .size-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr auto; gap: 8px; align-items: center; }
.size-head { font-size: .78rem; color: var(--taupe); margin-bottom: 4px; }
.size-row { margin-bottom: 8px; }
.size-row input { margin: 0; }
@media (max-width: 560px) {
  .size-head { display: none; }
  .size-row { grid-template-columns: 1fr 1fr; }
  .size-row [data-size-name] { grid-column: 1 / -1; }
}

/* v42: tappable options under the customer's chat. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.chips button {
  background: var(--white); color: var(--cocoa);
  border: 1px solid var(--petal); border-radius: 999px;
  padding: 8px 14px; font-size: .95rem; box-shadow: none;
}
.chips button:hover { background: var(--blush); }

/* ============================================================
   v47: the workspace, redrawn from the mockups.

   Same functions, new clothes. A tab bar instead of the sidebar,
   the logo centred, a wave behind the header, round icons on cards,
   counters with icons, the date squares, chevrons, and a few lines
   in a handwriting face where the mockups had them. The customer's
   page is untouched.
   ============================================================ */

:root { --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive; }

/* ---------- shell ---------- */
.shell { display: block; min-height: 100vh; }
.sidebar, .scrim, .nav-open, .nav-close { display: none !important; }
.main { display: block; }

.topbar {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 18px 16px 6px;
  border-bottom: none;
  position: relative;
  z-index: 1;
}
.topbar-logo { display: block !important; height: 54px; }

.content {
  padding: 8px 20px 110px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* The wave. One soft blush band behind the header, drawn once as a
   data URI so it costs no request. */
#shell-in {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 260' preserveAspectRatio='none'><path d='M0 120 C 180 40, 360 200, 560 110 S 760 60, 800 120 L 800 0 L 0 0 Z' fill='%23F5EDEB'/><path d='M0 200 C 200 120, 420 260, 620 170 S 780 130, 800 190 L 800 260 L 0 260 Z' fill='%23F9F2F0'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 260px;
  background-position: top center;
}

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
}
.tabbar .nav-item {
  position: relative;
  flex: 1;
  background: transparent;
  color: var(--cocoa);
  border-radius: 0;
  padding: 4px 2px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .78rem;
  box-shadow: none;
}
.tabbar .nav-item:hover { background: transparent; color: var(--rose-dark); }
.tabbar .nav-item[aria-current="true"] { background: transparent; color: var(--rose); }
.tabbar .nav-item[aria-current="true"]::after {
  content: ""; position: absolute; bottom: 2px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--rose);
}
.tab-ico .ico { width: 24px; height: 24px; }
.tab-label { font-family: var(--font-display); font-weight: 500; font-size: .92rem; }
.tabbar .nav-count {
  position: absolute; top: 0; right: calc(50% - 22px);
  min-width: 18px; padding: 1px 5px; font-size: .68rem;
}
.tabbar .nav-count.zero { display: none; }

/* On a desk the same bar sits under the logo, as a row of pills. */
@media (min-width: 821px) {
  .tabbar {
    position: sticky; top: 0; bottom: auto;
    max-width: 760px; margin: 4px auto 0;
    padding: 6px 8px; gap: 4px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .85);
  }
  .tabbar .nav-item { flex-direction: row; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); }
  .tabbar .nav-item[aria-current="true"] { background: var(--blush); }
  .tabbar .nav-item[aria-current="true"]::after { display: none; }
  .tab-ico .ico { width: 18px; height: 18px; }
  .tabbar .nav-count { position: static; margin-left: 2px; }
  #shell-in { display: flex; flex-direction: column; }
  .topbar { order: 0; }
  .tabbar { order: 1; }
  .content { order: 2; padding-bottom: 72px; }
}

/* ---------- icons, cards, heads ---------- */
.ico { width: 20px; height: 20px; flex-shrink: 0; vertical-align: -4px; }
.icon-circle {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--blush); color: var(--rose-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-circle .ico { width: 22px; height: 22px; }
.icon-circle.sm { width: 38px; height: 38px; }
.icon-circle.sm .ico { width: 18px; height: 18px; }

.card { border-radius: 20px; padding: 20px; border-color: #EEE3E1; }
.card-head { display: flex; align-items: center; gap: 14px; width: 100%; }
.card-head.as-btn {
  background: transparent; color: inherit; text-align: left;
  padding: 0; border-radius: var(--r-sm); box-shadow: none;
}
.card-head.as-btn:hover { background: transparent; color: inherit; }
.card-head.as-btn:hover .card-title { color: var(--rose-dark); }
.card-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--cocoa); }
.card-sub { font-size: .9rem; color: var(--taupe); }
.chev { width: 20px; height: 20px; color: var(--rose-dark); flex-shrink: 0; }
.chev-sm { width: 16px; height: 16px; }
.chev-down { transform: rotate(90deg); }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 14px 0 12px; }
.page-head h1 { margin: 0; }
.page-head .ghost { flex-shrink: 0; }

/* The handwriting lines the mockups had in the corners. */
.script {
  font-family: var(--font-script);
  color: var(--petal);
  font-size: 1.45rem;
  line-height: 1.05;
  text-align: right;
  transform: rotate(-6deg);
  flex-shrink: 0;
  padding-top: 8px;
  user-select: none;
}
.script-right { display: block; margin: 8px 6px 0 auto; max-width: 240px; }

.link-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--rose-dark); padding: 4px 8px; }
.cta-soft {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px;
  background: var(--blush); color: var(--rose-dark);
  border-radius: var(--r-pill); padding: 13px 18px; box-shadow: none;
}
.cta-soft:hover { background: var(--blush-deep); color: var(--rose-dark); }

/* ---------- home ---------- */
.greet { margin: 0; font-size: 1rem; }
.greet-name {
  display: inline-block; margin: 0;
  padding-bottom: 6px; border-bottom: 1px solid var(--petal);
}
.card.stats3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 16px 0; padding: 18px 8px;
}
.stats3 .stat {
  border: none; border-left: 1px solid var(--line); border-radius: 0;
  padding: 4px 12px;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 10px; row-gap: 6px;
}
.stats3 .stat:first-child { border-left: none; }
.stats3 .stat .n { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; grid-row: 1; }
.stats3 .stat .icon-circle { grid-row: 1; justify-self: end; }
.stats3 .stat .k { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .9rem; }
.stat-line { margin: -6px 4px 14px; font-size: .88rem; }
@media (max-width: 480px) {
  .stats3 { padding: 14px 4px; }
  .stats3 .stat { padding: 4px 8px; }
  .stats3 .stat .n { font-size: 2.1rem; }
  .stats3 .stat .k { font-size: .8rem; }
  .icon-circle.sm { width: 32px; height: 32px; }
}

.upcoming li.up-row { cursor: pointer; padding: 14px 0; }
.upcoming li.up-row:hover strong { color: var(--rose-dark); }
.up-date { min-width: 64px; padding: 8px 4px; border-radius: 14px; }
.up-date .d { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }

.url-box {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
.url-text { flex: 1; min-width: 0; font-size: .98rem; color: var(--cocoa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url-copy { display: inline-flex; align-items: center; gap: 6px; color: var(--rose-dark); padding: 4px 8px; }

/* ---------- requests ---------- */
.tabs { gap: 8px; }
.tab { border-radius: var(--r-pill); padding: 9px 16px; }
.empty { border-radius: 22px; padding: 44px 24px; }
.empty-ico { width: 46px; height: 46px; color: var(--rose-dark); margin-bottom: 10px; }
.empty h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin: 0 0 8px; }
.ticket { border-radius: 20px; }
.tip { margin-top: 24px; }
.tip .card-head { align-items: center; }
.tip-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ---------- my link ---------- */
.lnk { padding: 20px; }
.lnk-head { display: none; }
.lnk-url { display: none; }
.lnk-actions { margin-top: 12px; }
.lnk-actions button { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- settings ---------- */
.settings-dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0 16px;
  margin: 12px 0 0; font-size: .95rem;
}
.settings-dl dt, .settings-dl dd {
  margin: 0; padding: 10px 0; border-top: 1px solid var(--line);
}
.settings-dl dt { color: var(--taupe); }
.settings-dl dd { text-align: right; color: var(--cocoa); overflow-wrap: anywhere; }
.settings-card .card-head { margin-bottom: 4px; }
.logout {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 24px 0 8px;
  background: var(--blush); color: var(--rose-dark);
  border-radius: 18px; padding: 15px; font-size: 1.05rem; box-shadow: none;
}
.logout:hover { background: var(--blush-deep); color: var(--rose-dark); }

/* ---------- calendar ---------- */
.cal-head { justify-content: flex-start; gap: 6px; }
.cal-head h2 { margin: 0 6px; }
.cal-today { padding: 7px 16px; }
.cal-grid { gap: 8px; }
.cal-day { min-height: 74px; border-radius: 14px; border-color: #EEE3E1; }
.cal-num { font-size: .95rem; }
.cal-day.has-orders { background: var(--blush); border-color: #E8CFD3; }
.cal-day.has-orders .cal-num { color: var(--rose-dark); }
.cal-names { display: none; }
.cal-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rose); color: var(--white);
  font-size: .72rem; font-weight: 600; margin-top: auto;
}
.cal-day.is-today { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.cal-day.is-open { box-shadow: inset 0 0 0 2px var(--rose); }
@media (min-width: 821px) {
  .cal-day { min-height: 88px; }
  .cal-names { display: flex; }
  .cal-count { position: absolute; right: 6px; top: 6px; margin: 0; }
}
.cal-legend { gap: 22px; margin-top: 18px; }
.cal-legend .sw-order  { border-radius: 50%; background: var(--petal); }
.cal-legend .sw-quoted { border-radius: 50%; }

.day-thumb {
  width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  background: var(--blush);
}
.day-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--rose-dark); }
.day-head { align-items: center; gap: 12px; }
.day-caret { display: none; }
#cal-detail .card { border-radius: 20px; }

/* ---------- gate ---------- */
.heart-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--rose); margin: 4px auto 14px; max-width: 320px;
}
.heart-rule::before, .heart-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.heart-rule span { font-size: 1.1rem; line-height: 1; }
.in-icon { position: relative; }
.in-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cocoa); display: inline-flex; pointer-events: none; }
.in-ico .ico { width: 20px; height: 20px; }
.in-icon input { padding-left: 44px !important; }
.btn-arrow { margin-left: 6px; }
.gate-tagline {
  text-align: center; color: var(--taupe); font-size: .84rem;
  letter-spacing: .12em; margin: 26px 0 6px;
}
#view-setup .in-icon input { padding-left: 44px !important; }

/* ============================================================
   v50: after the first screenshots of the redraw.
   ============================================================ */

/* Settings: a real Edit button, not a chevron. */
.edit-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 11px 20px; font-size: 1rem; border-radius: var(--r-pill);
}
.edit-btn .ico { width: 18px; height: 18px; }

/* The greeting lines in the handwriting face, like the corner. */
.script-line {
  font-family: var(--font-script);
  color: var(--petal);
  font-size: 1.5rem;
  line-height: 1.1;
  transform: none;
  text-align: left;
}
p.greet.script-line { margin: 0 0 2px; }

/* Tab bar: the calendar stands out, the badge reads like a social
   one, and the active tab lights up instead of just changing colour. */
.tabbar .nav-item { transition: color .18s ease, transform .18s ease; }
.tabbar .nav-item .tab-ico { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.tabbar .nav-item[aria-current="true"] .tab-ico { transform: translateY(-2px) scale(1.12); }
.tabbar .nav-item[aria-current="true"] .tab-ico .ico { filter: drop-shadow(0 4px 8px rgba(185, 103, 115, .35)); }
.tabbar .nav-item:active .tab-ico { transform: scale(.92); }
.tabbar .nav-item[aria-current="true"]::after {
  width: 6px; height: 6px;
  animation: tab-dot .28s ease-out;
}
@keyframes tab-dot { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tabbar .nav-item[data-go="calendar"] .tab-ico {
  width: 54px; height: 54px; margin-top: -22px;
  border-radius: 50%;
  background: var(--rose); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(185, 103, 115, .35);
}
.tabbar .nav-item[data-go="calendar"] .tab-ico .ico { width: 26px; height: 26px; filter: none; }
.tabbar .nav-item[data-go="calendar"][aria-current="true"] .tab-ico { background: var(--rose-dark); transform: translateY(-4px) scale(1.06); }
.tabbar .nav-count {
  right: calc(50% - 24px); top: -2px;
  background: #D64550; color: var(--white);
  border: 2px solid var(--white);
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 600;
}
@media (min-width: 821px) {
  .tabbar .nav-item[data-go="calendar"] .tab-ico { width: 32px; height: 32px; margin-top: 0; box-shadow: none; }
  .tabbar .nav-item[data-go="calendar"] .tab-ico .ico { width: 18px; height: 18px; }
  .tabbar .nav-item[aria-current="true"] .tab-ico { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar .nav-item, .tabbar .nav-item .tab-ico { transition: none; }
  .tabbar .nav-item[aria-current="true"]::after { animation: none; }
}

/* Requests: air between tickets, a soft CakeQ-coloured edge, and
   clearer text inside. */
.ticket {
  margin: 22px 0;
  border: 1px solid #E3C6CB;
  border-left: 5px solid var(--petal);
  padding: 20px 22px 22px;
}
.tk-accepted { border-left-color: var(--green); }
.tk-new { border-color: #E3C6CB; }
.tk-who strong { font-size: 1.25rem; }
.tk-who p { color: var(--cocoa); font-size: .98rem; }
.tk-detail { font-size: .96rem; gap: 8px 14px; }
.tk-detail dt { color: var(--rose-dark); font-weight: 600; }
.tk-detail dd { color: var(--cocoa); }
.tk-hint { color: var(--taupe); }

/* My link: compact rows. */
.lnk { padding: 16px 18px; margin: 14px 0; }
.lnk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lnk-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.lnk-title .muted { font-family: var(--font-ui); font-weight: 400; font-size: .85rem; margin-left: 4px; }
.lnk-line { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lnk-line .url-box { flex: 1 1 260px; margin: 0; padding: 9px 12px; }
.lnk-share, .lnk-open { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; }
.lnk-small { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.lnk-small .plain { padding: 4px 8px; font-size: .88rem; }
.lnk-small details { display: inline-block; margin: 0; }
.lnk-small summary { font-size: .88rem; color: var(--rose-dark); cursor: pointer; padding: 4px 8px; }
.lnk-small textarea { margin-top: 8px; width: 100%; }
.lnk-actions { display: none; }

/* Calendar: the range mode. */
.cal-range { padding: 7px 14px; }

/* ============================================================
   v51: second round of screenshots, and the profile photo.
   ============================================================ */

/* Edit: outlined in rose, on the page background. */
.edit-btn, .lnk-share {
  background: var(--cream);
  color: var(--rose-dark);
  border: 1.5px solid var(--rose);
  box-shadow: none;
}
.edit-btn:hover, .lnk-share:hover { background: var(--blush); color: var(--rose-dark); }

/* The tab bar as glass. */
.tabbar {
  background: rgba(253, 252, 250, .55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 -8px 30px rgba(74, 46, 39, .06);
}
@media (min-width: 821px) {
  .tabbar { background: rgba(253, 252, 250, .6); border: 1px solid rgba(208, 143, 155, .35); }
}

/* My link: one height for the box and both buttons. */
.lnk-line { align-items: center; }
.lnk-line .url-box, .lnk-share, .lnk-open { height: 48px; box-sizing: border-box; }
.lnk-line .url-box { padding: 0 12px; display: flex; align-items: center; }
.lnk-line a { display: inline-flex; }
.lnk-share { border-radius: var(--r-pill); padding: 0 18px; }
.lnk-open { padding: 0 18px; }

/* Requests: every ticket edged the same, clearly. */
.ticket, .tk-new, .tk-accepted, .tk-rejected, .tk-discarded {
  border: 1.5px solid var(--petal);
  border-left: 5px solid var(--petal);
}
.tk-accepted { border-left-color: var(--green); }
.tk-rejected, .tk-discarded { opacity: .8; }

/* The status tabs, visible. */
.tab { border: 1.5px solid var(--petal); color: var(--cocoa); background: var(--white); }
.tab[aria-selected="true"] { background: var(--rose); border-color: var(--rose); color: var(--white); }
.tab[aria-selected="true"] .count { background: var(--white); color: var(--rose-dark); }
.tab[aria-selected="false"] .count { background: var(--blush); color: var(--rose-dark); }

/* The profile photo. */
.avatar { border-radius: 50%; object-fit: cover; background: var(--blush); flex-shrink: 0; }
.avatar-home { width: 88px; height: 88px; border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(74, 46, 39, .12); }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 96px; height: 96px; }
.avatar-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--rose-dark); }
.greet-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-edit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.avatar-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; padding: 9px 16px; border-radius: var(--r-pill); font-size: .95rem; }
.avatar-pick { background: var(--white); color: var(--rose-dark); border: 1.5px solid var(--rose); }
.avatar-pick:hover { background: var(--blush); }

/* v52: the photo lives on Home and is tappable; Settings is clean. */
.avatar-btn { all: unset; cursor: pointer; position: relative; display: inline-flex; border-radius: 50%; }
.avatar-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.avatar-home { width: 96px; height: 96px; }
.avatar-empty { flex-direction: column; gap: 2px; border: 1.5px dashed var(--petal); background: var(--white); }
.avatar-empty .ico { width: 26px; height: 26px; }
.avatar-empty small { font-size: .7rem; color: var(--rose-dark); letter-spacing: .02em; }
.avatar-hint {
  position: absolute; right: -2px; bottom: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rose); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
.avatar-hint .ico { width: 14px; height: 14px; }
.avatar-btn:hover .avatar-home { filter: brightness(.96); }
.avatar-edit, .avatar-pick { display: none; }

/* A lighter glass. */
.tabbar { background: rgba(253, 252, 250, .32); }
@media (min-width: 821px) { .tabbar { background: rgba(253, 252, 250, .4); } }

/* v53: the photo on the left, centred on the name; lighter glass. */
.greet-row { align-items: center; gap: 16px; }
.greet-row .greet-name { align-self: center; }
.tabbar { background: rgba(253, 252, 250, .18); }
@media (min-width: 821px) { .tabbar { background: rgba(253, 252, 250, .28); } }

/* v54: the privacy line and page. */
.privacy-line { margin: 10px 4px 0; font-size: .78rem; color: var(--taupe); text-align: center; line-height: 1.4; }
.privacy-line a { color: var(--rose-dark); }
.legal { max-width: 680px; margin: 0 auto; padding: 8px 20px 60px; }
.legal h1 { font-size: 1.9rem; margin: 18px 0 6px; }
.legal h2 { font-size: 1.25rem; margin: 22px 0 6px; }
.legal p { line-height: 1.6; }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 36px 0 12px; }

/* v58: the way out, quiet and clear. */
.danger-line { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px 0 30px; text-align: center; }
.danger-line .muted { font-size: .82rem; max-width: 420px; }
button.danger { color: #B0463F; }
button.danger:hover { background: #F9E9E7; color: #8F332D; }

/* ============================================================
   v59: the phone. Less air top to bottom, and two things that broke
   on a narrow screen.
   ============================================================ */
.wide { display: inline; } .narrow { display: none; }

@media (max-width: 600px) {
  /* header and page head, tighter */
  .topbar { padding: 12px 16px 2px; }
  .topbar-logo { height: 44px; }
  #shell-in { background-size: 100% 170px; }
  .content { padding: 4px 16px 100px; }
  .page-head { margin: 8px 0 8px; gap: 10px; }
  .page-head h1 { font-size: 1.9rem; }
  .page-head .muted { font-size: .92rem; }
  .script { font-size: 1.15rem; padding-top: 4px; }
  .script-line { font-size: 1.2rem; }
  p.greet.script-line { margin: 0; }
  .greet-name { font-size: 1.7rem; padding-bottom: 4px; }
  .greet-row { gap: 12px; flex-wrap: nowrap; }
  .avatar-home { width: 64px; height: 64px; }
  .avatar-hint { width: 22px; height: 22px; right: -2px; bottom: 0; }
  .avatar-hint .ico { width: 11px; height: 11px; }
  .avatar-empty .ico { width: 20px; height: 20px; }
  .avatar-empty small { font-size: .6rem; }
  .card { padding: 16px; margin: 12px 0; }
  .card.stats3 { margin: 12px 0; }
  .stat-line { margin: -2px 4px 10px; }

  /* settings: label above value, not two starved columns */
  .settings-dl { grid-template-columns: 1fr; gap: 0; }
  .settings-dl dt { padding: 10px 0 2px; border-top: 1px solid var(--line); font-size: .85rem; }
  .settings-dl dd { padding: 0 0 10px; border-top: none; text-align: left; }
  .card-head { gap: 10px; }
  .icon-circle { width: 40px; height: 40px; }
  .card-title { font-size: 1.1rem; }
  .card-sub { font-size: .85rem; }
  .edit-btn { padding: 9px 14px; font-size: .92rem; }

  /* calendar: month row, then the two buttons on their own row */
  .cal-head { flex-wrap: wrap; row-gap: 8px; }
  .cal-head .grow { flex-basis: 100%; height: 0; }
  .cal-today, .cal-range { flex: 1; white-space: nowrap; padding: 8px 10px; }
  .wide { display: none; } .narrow { display: inline; }
  .cal-day { min-height: 56px; border-radius: 10px; }
  .cal-grid { gap: 5px; }
  .cal-count { width: 20px; height: 20px; font-size: .68rem; }

  /* requests */
  .ticket { padding: 16px; margin: 14px 0; }
  .tk-who strong { font-size: 1.1rem; }
}

/* v60: the photo with a worn rose ring, the name sitting on the same
   line as the pencil, a little bigger on the phone. */
.avatar-btn::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px dashed rgba(208, 143, 155, .85);
  pointer-events: none;
}
.avatar-btn { margin: 7px; }
.avatar-home { border: 3px solid var(--white); }
.greet-row { align-items: flex-end; }
.greet-row .greet-name { align-self: flex-end; margin-bottom: 2px; }
@media (max-width: 600px) {
  .avatar-home { width: 80px; height: 80px; }
  .avatar-hint { width: 26px; height: 26px; }
  .avatar-hint .ico { width: 13px; height: 13px; }
  .greet-name { font-size: 1.75rem; }
}

/* v60: the glass, lighter still. */
.tabbar { background: rgba(253, 252, 250, .10); }
@media (min-width: 821px) { .tabbar { background: rgba(253, 252, 250, .18); } }

/* ============================================================
   v61: a solid ring instead of the dashed one; real glass; thinner,
   clearly edged link cards.
   ============================================================ */
.avatar-btn::after { border: 2.5px solid var(--petal); }
.avatar-btn { margin: 6px; }
.avatar-btn::after { inset: -6px; }

/* Glass that shows what is under it: little blur, no shadow, a faint
   rose edge. */
.tabbar {
  background: rgba(253, 252, 250, .06);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: none;
  border-top: 1px solid rgba(208, 143, 155, .35);
}
@media (min-width: 821px) {
  .tabbar { background: rgba(253, 252, 250, .12); border: 1px solid rgba(208, 143, 155, .35); }
}

/* Link cards: thin, and each one edged in rose. */
.lnk {
  padding: 10px 14px 8px; margin: 10px 0;
  border: 1.5px solid var(--petal); border-left: 5px solid var(--rose); border-radius: 16px;
}
.lnk-row { margin-bottom: 6px; gap: 8px; }
.lnk-row .icon-circle.sm { width: 30px; height: 30px; }
.lnk-row .icon-circle.sm .ico { width: 15px; height: 15px; }
.lnk-title { font-size: 1.05rem; }
.lnk-line { gap: 6px; }
.lnk-line .url-box, .lnk-share, .lnk-open { height: 40px; }
.lnk-line .url-box { padding: 0 10px; }
.lnk-share, .lnk-open { padding: 0 14px; font-size: .92rem; }
.lnk-small { margin-top: 2px; gap: 0; }
.lnk-small .plain, .lnk-small summary { padding: 2px 6px; font-size: .84rem; }

/* ============================================================
   v62: an aura instead of a ring, so the pencil stays on top; the
   link cards tidy on the phone.
   ============================================================ */
.avatar-btn::after { display: none; }
.avatar-btn { margin: 4px; }
.avatar-home {
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px rgba(208, 143, 155, .45), 0 0 22px 6px rgba(208, 143, 155, .35);
}
.avatar-hint { z-index: 2; }

@media (max-width: 600px) {
  .lnk { padding: 10px 12px 8px; }
  .lnk-line .url-box { flex-basis: 100%; }
  .lnk-share, .lnk-open { flex: 1; justify-content: center; }
  .lnk-line a { flex: 1; display: flex; }
  .lnk-line a .lnk-open { width: 100%; }
  .lnk-small { justify-content: space-between; }
}