/* Design refresh (Oct 30): the brand does more of the work, in the same layout. Loaded after app.css and
   app-extra.css, and shared by Saywell Studio for the side menu.
   - One marigold button at a time: the mic while the request box is empty, Send once there are words, the
     waiting change's button when something needs the practice.
   - The logo's folded corner on the request box and the change that's waiting, and on the current page's pill.
   - "This month" on a Dusk stage, where marigold passes contrast (5.4:1); on paper it's only ever decoration (2:1).
   - Recent changes as a short timeline. Status tags shaped like the speech bubble. */

:root { --stage: #2E3270; --on-stage: #FFFFFF; --on-stage-muted: #D9DAF2; --stage-accent: #F2B356; --stage-label: #F3CC93; --fold: #E9A23B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --stage: #272B53; --on-stage-muted: #C9CBEE; --fold: #F2B356; } }
:root[data-theme="dark"] { --stage: #272B53; --on-stage-muted: #C9CBEE; --fold: #F2B356; }

/* The folded corner: the page colour cut across the top right, the marigold fold below it. No clip-path, so cards keep their shadow. */
.fold { position: relative; }
.fold::before { content: ""; position: absolute; top: -1px; right: -1px; width: 28px; height: 28px; background: linear-gradient(to bottom left, var(--surface) 50%, var(--fold) 50%); border-bottom-left-radius: 3px; pointer-events: none; }

/* Speech-bubble tags: a soft corner bottom left, like the logo's tail. */
.tag, .ai-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 10px 10px 10px 3px; font: 700 .8125rem/1.3 var(--sans); white-space: nowrap; }
.tag.warm { background: var(--marigold-soft); color: var(--on-marigold-soft); }
.tag.ok { background: var(--fern-soft); color: var(--fern); }
.ai-tag { font: 500 .6875rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--dusk-soft); color: var(--dusk); vertical-align: middle; }

/* Side menu: quieter, and the current page is a Dusk pill with the fold. */
.lockup small { font: 500 .625rem/1 var(--mono); letter-spacing: .12em; background: transparent; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 8px 8px 8px 2px; padding: 3px 6px; }
.nav button { font-weight: 400; }
.nav button:hover { background: var(--dusk-hover); }
.nav button[aria-current="page"] { position: relative; background: var(--dusk); color: var(--on-dusk); font-weight: 700; box-shadow: none; overflow: hidden; border-top-right-radius: 3px; }
.nav button[aria-current="page"]::before { left: auto; right: 0; top: 0; bottom: auto; width: 14px; height: 14px; border-radius: 0 0 0 2px; background: linear-gradient(to bottom left, var(--surface) 50%, var(--fold) 50%); }
.nav button[aria-current="page"]:hover { background: var(--dusk); }

/* Home greeting: bigger, the name highlighted, one line on where things stand. */
.view[data-view="home"] .page-head h1 { font-size: clamp(2.25rem, 5.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.view[data-view="home"] .page-head h1::after { display: none; }
.hl { background: linear-gradient(transparent 70%, var(--fold) 70%, var(--fold) 88%, transparent 88%); padding: 0 2px; }
.page-head .eyebrow { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .14em; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.status-row .status-line { margin-top: 0; }
.status-bits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: .9375rem; }
.status-bits:empty { display: none; }
.status-bits .sep { color: var(--muted); }
.status-bits .link-btn { min-height: 24px; }
@media (max-width: 640px) { .status-row { flex-direction: column; align-items: flex-start; gap: 6px; } .status-bits .sep { display: none; } }

/* The request box */
.composer { border-radius: 24px; padding: 26px 28px 22px; gap: 14px; }
.composer-top b { font-size: 1.5rem; }
.composer-top .ai-tag { margin-left: 6px; position: relative; top: -2px; }
.composer textarea { min-height: 110px; border: 1px solid var(--line); }
.starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.starters .note { margin-right: 2px; }
.starters button { min-height: 40px; padding: 0 14px; border-radius: 16px 16px 16px 4px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); font-size: .9375rem; cursor: pointer; }
.starters button:hover { border-color: var(--dusk); background: var(--dusk-hover); }
.composer-foot { border-top: 1px solid var(--line); padding-top: 16px; gap: 12px; }
.mic-label { display: grid; line-height: 1.3; }
.mic-label b { font-size: 1rem; }
.mic-label .note { font-size: .875rem; }
.composer .mic { width: 56px; height: 56px; box-shadow: 0 0 0 6px var(--marigold-soft); transition: background .15s, box-shadow .15s; }
.composer .mic svg { width: 22px; height: 22px; }
/* Send: outlined until there are words, then it takes the marigold and the mic steps back. */
.composer #send { background: transparent; border: 1.5px solid var(--dusk); color: var(--dusk); }
.composer #send:hover { background: var(--dusk-hover); filter: none; }
.composer.has-text #send { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.composer.has-text #send:hover { background: var(--marigold); filter: brightness(.94); }
.composer.has-text .mic:not(.on), .has-attn .composer .mic:not(.on) { background: var(--marigold-soft); color: var(--dusk); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .composer.has-text .mic:not(.on), :root:not([data-theme="light"]) .has-attn .composer .mic:not(.on) { background: var(--dusk-soft); } }
:root[data-theme="dark"] .composer.has-text .mic:not(.on), :root[data-theme="dark"] .has-attn .composer .mic:not(.on) { background: var(--dusk-soft); }

/* A change that needs the practice: above the request box, and the screen's one marigold button. */
.attn { background: var(--raised); color: var(--ink); border: 1px solid var(--card-line); border-radius: 24px; box-shadow: 0 1px 2px rgba(46, 50, 112, .06), 0 14px 36px -14px rgba(46, 50, 112, .28); padding: 22px 26px; gap: 14px 20px; }
.attn-ico { width: auto; height: auto; background: none; border-radius: 0; align-self: flex-start; }
.attn-ico svg { width: 44px; height: 44px; }
.attn-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 6px; }
.attn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.attn p { font-size: 1rem; }
.attn p b { font: 700 1.375rem/1.25 var(--display); letter-spacing: -0.01em; margin-bottom: 2px; }
.attn-trust { font-size: .875rem; color: var(--muted); }
.attn .btn-primary { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); min-height: 52px; padding: 0 28px; box-shadow: 0 8px 18px -8px rgba(233, 162, 59, .7); }
.attn .btn-primary:hover { background: var(--marigold); filter: brightness(.94); }

/* This month, on the Dusk stage */
.card.month { background: var(--stage); color: var(--on-stage); border-color: transparent; box-shadow: 0 14px 34px -14px rgba(46, 50, 112, .6); }
:root[data-theme="dark"] .card.month { border-color: #3A3E62; }
.m-label { font: 500 .75rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-label); margin: 0; }
.card.month .chip { background: rgba(255, 255, 255, .12); color: var(--on-stage); border-radius: 10px 10px 10px 3px; }
.card.month .chip::before { display: none; }
.card.month .tasks-meter b { font-size: 4.5rem; line-height: .95; letter-spacing: -0.03em; color: var(--on-stage); }
.card.month .tasks-meter span { color: var(--on-stage-muted); }
.segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.segs i { height: 12px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.segs i.u { background: var(--stage-accent); box-shadow: none; }
.segs i.h { box-shadow: none; border: 2px dashed var(--stage-accent); }
.m-sub { color: var(--on-stage-muted); font-size: .9375rem; }
.card.month .note { color: var(--on-stage-muted); padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; }

/* Recent changes: a timeline with the speech bubble as each marker */
.list.timeline { position: relative; }
.list.timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 18px 30px; border-top: 0; }
.list.timeline li:last-child { padding-bottom: 0; }
.list.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%232E3270' d='M18 8H39V27H58V34A12 12 0 0 1 46 46H28L14 58L18 46A12 12 0 0 1 6 34V20A12 12 0 0 1 18 8Z'/%3E%3Cpath fill='%23E9A23B' d='M42 8L58 24H42Z'/%3E%3C/svg%3E"); }
.list.timeline li::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: 2px; width: 2px; background: var(--line); }
.list.timeline li:last-child::after { display: none; }
.list.timeline li.empty { padding-left: 0; }
.list.timeline li.empty::before, .list.timeline li.empty::after { display: none; }
.tl-when { font: 500 .6875rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.list.timeline .t { font-weight: 400; line-height: 1.4; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.tl-meta .note { font-size: .8125rem; }
.tl-meta .link-btn { font-size: .875rem; min-height: 24px; margin-left: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .list.timeline li::before { filter: brightness(2.4) saturate(.7); } }
:root[data-theme="dark"] .list.timeline li::before { filter: brightness(2.4) saturate(.7); }

/* Phones: the bottom tabs get the same pill, and Send fills the row once there are words. */
@media (max-width: 959px) {
  .bottom-nav { padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .bottom-nav button { border-radius: 16px; padding: 8px 2px 9px; }
  .bottom-nav button[aria-current="page"] { background: var(--dusk); color: var(--on-dusk); }
  .bottom-nav button[aria-current="page"]::before { display: none; }
}
@media (max-width: 640px) {
  .composer { padding: 20px 18px 18px; }
  .composer-top b { font-size: 1.25rem; }
  .composer-foot .credit { display: none; }
  .attn { padding: 18px; }
  .card.month .tasks-meter b { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) { .composer .mic { transition: none; } }