/* ============================================================
   PHESTI APP LOOK (v1.40, 2026-10-07)
   The inside of the app in Phesti's finish (squared buttons, frosted glass, calm serif
   headings, an aurora in the sidebar), worn in each organization's own colours and fonts.
   A layer on top of styles.css: nothing moves or is renamed, so nobody relearns anything.
   Rules: every colour comes from the organization's ramp (--brand-*) or the status and
   booking colours Everett chose; --serif is the organization's display face, --sans its
   text face; no pills; never set `position` on .sidebar (the phone drawer needs its own).
   ============================================================ */

:root {
  --rf-radius: 10px;
  --rf-radius-lg: 14px;
  --rf-radius-xl: 18px;
  --rf-canvas: color-mix(in srgb, var(--brand-600) 3%, #F5F7F9);
  --rf-card-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -16px rgb(15 23 42 / .22);
  --rf-card-shadow-hi: 0 2px 4px rgb(15 23 42 / .05), 0 18px 40px -20px rgb(15 23 42 / .34);
  --rf-ease: cubic-bezier(.2, .8, .2, 1);
  --rf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230A142A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --rf-canvas: var(--bg-1); --rf-card-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 28px -16px rgb(0 0 0 / .6); --rf-card-shadow-hi: 0 1px 0 rgb(255 255 255 / .04) inset, 0 18px 40px -18px rgb(0 0 0 / .7); }

/* ============ the frame ============ */
.app { background: var(--rf-canvas); }
.main {
  background:
    radial-gradient(900px 280px at 18% -90px, color-mix(in srgb, var(--brand-400) 14%, transparent), transparent 70%),
    var(--rf-canvas);
}
.view { padding: 8px 28px 80px; }
.view__inner { max-width: 1120px; }

/* ---- buttons and fields: squared, a touch taller ---- */
.btn { border-radius: var(--rf-radius); padding: 9px 15px; font-weight: 600; }
.btn--sm { border-radius: 8px; padding: 6px 11px; }
.btn--lg { padding: 12px 20px; }
.btn--primary { box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 8px 18px -10px color-mix(in srgb, var(--brand-700) 80%, transparent); }
.btn--ghost { background: var(--bg-2); border-color: var(--line); box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.input, .select, .textarea { border-radius: 9px; }
.iconbtn { border-radius: 8px; width: 30px; height: 30px; }

/* ============ sidebar: a frosted column over the organization's own aurora ============ */
.sidebar {
  isolation: isolate; border-right: 0; color: #fff;
  background:
    radial-gradient(70% 38% at 8% 0%, color-mix(in srgb, var(--brand-400) 60%, transparent), transparent 72%),
    radial-gradient(60% 30% at 100% 34%, color-mix(in srgb, var(--brand-500) 42%, transparent), transparent 70%),
    radial-gradient(80% 32% at 20% 104%, color-mix(in srgb, var(--golden-yellow) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--brand-700) 0%, var(--brand-800) 52%, var(--brand-900) 100%);
}
@media (min-width: 861px) {
  .sidebar { margin: 12px 0 12px 12px; height: calc(100dvh - 24px); border-radius: var(--rf-radius-xl); overflow: hidden;
    box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--brand-900) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .12); }
}
.sidebar__brand { padding: 20px 18px 18px; gap: 12px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.sidebar__wordmark strong { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.012em; color: #fff; }
/* "Phesti." in its own brand type, small, under the organization's name */
.sidebar__wordmark span { font-family: "Newsreader", Georgia, serif; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .62); margin-top: 3px; }
.sidebar__wordmark span::after { content: ""; display: inline-block; width: .17em; height: .17em; margin-left: .05em; border-radius: 50%; background: #B08A3E; }
.sidebar__nav { padding: 14px 12px 10px; gap: 3px; }
.navitem { min-height: 40px; border-radius: var(--rf-radius); padding: 9px 11px; font-weight: 550; font-size: 14px; color: rgb(255 255 255 / .78); transition: background-color .2s var(--rf-ease), color .2s var(--rf-ease); }
.navitem .ico { opacity: .85; }
.navitem:hover { background: rgb(255 255 255 / .08); color: #fff; }
.navitem.is-active {
  background: rgb(255 255 255 / .15); color: #fff; font-weight: 650;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .08), inset 3px 0 0 var(--golden-yellow);
}
.navitem.is-active .ico { opacity: 1; }
.sidebar__scroll { padding: 2px 12px 14px; }
.monthnav { border-radius: var(--rf-radius); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); }
.monthnav__btn, .monthnav__label { border-radius: 7px; }
.monthnav__label { font-family: var(--serif); font-size: 14px; }
.sidebar .btn--ghost { border-radius: var(--rf-radius); background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); box-shadow: none; color: #fff; }
.sidebar .btn--ghost:hover { background: rgb(255 255 255 / .16); }

/* ============ top bar: the search floats; nothing else in the way ============ */
.topbar { background: transparent; border-bottom: 0; gap: 12px; }
@media (min-width: 900px) { .topbar { padding: 18px 28px 10px; } }
.topbar__search { max-width: 560px; }
.topbar__input { border-radius: 12px; padding: 11px 48px 11px 39px; border: 1px solid var(--line); background: var(--bg-2);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 22px -16px rgb(15 23 42 / .25); }
.topbar__kbd { border-radius: 6px; }
.segs { border-radius: 12px; border-color: var(--line); background: var(--bg-2); padding: 3px; gap: 3px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.segs__b { min-height: 34px; width: 36px; border-radius: 9px; border-right: 0; }
.segs__b.is-on { box-shadow: 0 4px 10px -6px color-mix(in srgb, var(--brand-700) 90%, transparent); }
.topbar .btn--primary { padding: 11px 17px; border-radius: 12px; }

/* ============ view headings (Calendar, Crew, Bin) ============ */
.viewhead { margin: 10px 0 22px; align-items: center; }
.viewhead h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: -.018em; line-height: 1.05; }
.viewhead p { font-size: 14px; margin-top: 6px; }
.view .section__h h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--txt-1); }
.view .section__count, .dayhead__n { border-radius: 6px; padding: 1px 8px; background: var(--bg-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.empty h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.empty__ico { border-radius: 14px; }

/* ============ events list ============ */
.dayhead { margin: 30px 0 12px; padding: 6px 0; background: linear-gradient(var(--rf-canvas) 72%, transparent); }
.dayhead__d { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--txt-1); }
.dayhead.is-today .dayhead__d { color: var(--brand-600); }
.dayhead__rule { background: color-mix(in srgb, var(--line) 80%, transparent); }
/* the compact list and the bin */
.erows { gap: 6px; }
.erow { border-radius: 12px; padding: 9px 14px; border-left-width: 4px; box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  background: linear-gradient(100deg, var(--bk-wash, var(--bg-2)) 0%, var(--bg-2) 55%); transition: box-shadow .2s var(--rf-ease), transform .2s var(--rf-ease); }
.erow:hover { box-shadow: var(--rf-card-shadow); transform: translateY(-1px); }
.erow__date { border-radius: 9px; }
.erow__day { font-family: var(--serif); font-size: 16px; }
.erow__n { font-family: var(--serif); font-size: 15px; font-weight: 600; }

/* ============ calendar ============ */
.calnav__btn { border-radius: var(--rf-radius); }
.cal { border-radius: var(--rf-radius-xl); border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--rf-card-shadow); }
.cal__dows { background: transparent; border-bottom: 1px solid var(--line); }
.cal__dow { padding: 13px 12px 11px; font-size: 10.5px; letter-spacing: .13em; }
.cal__cell { min-height: 122px; padding: 8px 8px 10px; gap: 5px; border-color: color-mix(in srgb, var(--line) 75%, transparent); transition: background-color .15s ease; }
.cal__cell:nth-child(7n+1), .cal__cell:nth-child(7n) { background: color-mix(in srgb, var(--brand-600) 2%, var(--bg-1)); }
.cal__cell:hover { background: color-mix(in srgb, var(--brand-600) 4%, var(--bg-2)); }
.cal__cell.is-out { background: color-mix(in srgb, var(--bg-1) 70%, var(--bg-2)); }
.cal__cell.is-out .cal__n { opacity: .45; }
.cal__n { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--txt-2); padding: 1px 5px; }
.cal__cell.is-today .cal__n { background: var(--brand-600); color: #fff; border-radius: 8px; padding: 2px 9px;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand-700) 90%, transparent); }
.cal__ev { border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-weight: 600; border: 0; box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  transition: transform .15s var(--rf-ease), box-shadow .15s var(--rf-ease); }
.cal__ev:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgb(15 23 42 / .35); }
.cal__more { border-radius: 6px; font-weight: 600; }

/* ============ crew ============ */
.grid-cards { gap: 14px; }
.tile { border-radius: var(--rf-radius-lg); padding: 18px; gap: 12px; box-shadow: var(--rf-card-shadow); transition: box-shadow .25s var(--rf-ease), transform .25s var(--rf-ease); }
.tile:hover { background: var(--bg-2); box-shadow: var(--rf-card-shadow-hi); transform: translateY(-1px); }
.tile__top { gap: 12px; }
.tile .av, .tile__top .av { width: 40px; height: 40px; font-size: 14px; border-radius: 12px; }
.tile__name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tile__role { font-size: 12.5px; }
.tile__row b { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }
.tile__acts { border-top-color: color-mix(in srgb, var(--line) 80%, transparent); padding-top: 12px; }
.prow, .arow { border-radius: 12px; }

/* ============ the event panel: a floating sheet ============ */
@media (min-width: 700px) {
  .panel { top: 12px; right: 12px; bottom: 12px; width: min(580px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 100px -36px rgb(15 23 42 / .5), 0 0 0 1px rgb(15 23 42 / .03); }
}
.panel-scrim { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.panel__head { padding: 22px 24px 0; background: var(--bg-2); }
.panel__title h2, .panel__name { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.016em; line-height: 1.12; }
.panel__close { border-radius: var(--rf-radius); width: 34px; height: 34px; }
.statbar { border-radius: 12px; padding: 3px; gap: 3px; background: var(--bg-3); border: 1px solid var(--line); margin-top: 16px; }
.statbar__b { border-radius: 9px; border-right: 0 !important; padding: 8px 10px; }
.tabs { gap: 2px; margin-top: 16px; }
.tab { padding: 11px 12px; font-size: 13.5px; border-bottom-width: 2px; transition: color .2s ease, border-color .2s ease; }
.tab.is-active { color: var(--txt-1); }
.tab__n { border-radius: 5px; padding: 0 5px; background: var(--bg-3); }
.panel__body { padding: 22px 24px; background: var(--rf-canvas); }
.panel__foot { padding: 14px 24px; background: var(--bg-2); }
.panel__body .section__h { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.panel__body .section__h h3 { color: var(--brand-700); letter-spacing: .12em; font-size: 11px; }
.deflist { border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.deftiles .def { border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.def dt { background: color-mix(in srgb, var(--brand-600) 4%, var(--bg-2)); }
.row, .shift, .att, .note { border-radius: 12px; padding: 11px 13px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.quickadd { border-radius: 12px; padding: 11px 13px; border-style: solid; border-color: var(--line); background: var(--bg-2); }
.techpick, .shiftedit, .noteadd, .dropzone, .readycard, .notice { border-radius: 12px; }
.segpick { border-radius: 10px; }

/* ============ pop-ups, menus, messages ============ */
.modal-root { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { border-radius: 20px; border-color: var(--line); box-shadow: 0 40px 100px -30px rgb(15 23 42 / .55); }
.modal__head { padding: 20px 22px; }
.modal__head h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.014em; }
.modal__body { padding: 20px 22px; }
.modal__foot { padding: 14px 22px; background: var(--bg-2); }
.ctx { border-radius: 14px; padding: 6px; background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px -24px rgb(15 23 42 / .45), 0 0 0 1px rgb(15 23 42 / .06); }
.ctx__i { border-radius: 8px; }
.toast { border-radius: 12px; box-shadow: 0 18px 40px -20px rgb(15 23 42 / .45); }

/* ============ phones ============ */
@media (max-width: 860px) {
  .view { padding: 6px 14px 80px; }
  .sidebar { box-shadow: none; }
  .sidebar.is-open { box-shadow: 24px 0 60px -20px rgb(0 0 0 / .45); }
  .cal__cell { min-height: 76px; padding: 4px; }
  .sidebar__toggle { border-radius: 10px; transition: transform .3s var(--rf-ease); }
  .sidebar.is-open ~ .sidebar__toggle { transform: translateX(calc(var(--sidebar-w) - 58px)); background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .2); color: #fff; box-shadow: none; }
}
@media (max-width: 620px) {
  .topbar .btn--primary span { display: none; }
  .topbar .btn--primary { padding: 0 12px; min-height: 42px; }
}
@media (max-width: 620px) {
  .dayhead__d { font-size: 16.5px; } .dayhead { margin-top: 22px; }
  .viewhead h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .tile, .erow, .cal__ev, .navitem { transition: none; }
  .card:hover, .tile:hover, .erow:hover, .cal__ev:hover { transform: none; }
}

/* ============ dark mode, for every organization ============
   The old dark ground was Shoreline's green pulled to black. Now each organization gets its own:
   a near-black tinted with its deepest brand colour, and brand labels lifted to a readable shade. */
:root[data-theme="dark"] {
  --bg-0: color-mix(in srgb, var(--brand-900) 26%, #080B10);
  --bg-1: color-mix(in srgb, var(--brand-900) 22%, #0C0F14);
  --bg-2: color-mix(in srgb, var(--brand-900) 20%, #12161D);
  --bg-3: color-mix(in srgb, var(--brand-900) 18%, #181D25);
  --bg-4: color-mix(in srgb, var(--brand-900) 16%, #1F252E);
  --line: color-mix(in srgb, var(--brand-400) 10%, #232A34);
  --line-2: color-mix(in srgb, var(--brand-400) 14%, #2E3642);
  --txt-1: #ECEFF3; --txt-2: #B6BDC8; --txt-3: #959DAA;
  --rf-canvas: var(--bg-1);
}
:root[data-theme="dark"] .times__seg--event b, :root[data-theme="dark"] .times__seg--event .ico,
:root[data-theme="dark"] .card .times__seg--event b, :root[data-theme="dark"] .times__total,
:root[data-theme="dark"] .panel__body .section__h h3, :root[data-theme="dark"] .dayhead.is-today .dayhead__d,
:root[data-theme="dark"] .tab.is-active, :root[data-theme="dark"] a { color: var(--brand-300); }
:root[data-theme="dark"] .tab.is-active { border-bottom-color: var(--brand-300); }
:root[data-theme="dark"] .erow__date { background: var(--bg-3); }
:root[data-theme="dark"] .main { background: radial-gradient(900px 280px at 18% -90px, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 70%), var(--bg-1); }


/* ============ v1.32: the sidebar, finished ============ */
/* the organization's mark sits on a frosted tile: white letters (or Shoreline's waves) over its accent */
.sidebar__brand { gap: 13px; }
.sidebar__mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: linear-gradient(155deg, rgb(255 255 255 / .24), rgb(255 255 255 / .06) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .14), 0 12px 24px -14px rgb(0 0 0 / .6); }
.sidebar__mark svg { width: 30px; height: 30px; display: block; }
.navitem__count { background: none; padding: 0; border-radius: 0; font: 500 12px/1 var(--num, var(--sans)); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .5); }
.navitem.is-active .navitem__count { color: rgb(255 255 255 / .85); }

/* headings: the organization's display face, with a hairline running out to the edge */
.sidebar__scroll { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent; }
.sidebar__scroll::-webkit-scrollbar { width: 6px; }
.sidebar__scroll::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); border-radius: 6px; }
.sidebar__block { border-top: 0; margin-top: 4px; padding: 12px 2px 2px; }
.sidebar__h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 8px;
  font-family: var(--serif); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .94); }
.sidebar__h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / .2), transparent); }

/* filter rows: a tick box in the row's own colour, the words dim when it's off, the count as a plain number */
.filters { gap: 1px; }
.filter { --fc: var(--golden-yellow); display: flex; align-items: center; gap: 11px; min-height: 34px; padding: 6px 9px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: rgb(255 255 255 / .56); transition: background-color .15s ease, color .15s ease; }
.filter:hover { background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .8); }
.filter:has(input:checked) { color: #fff; }
.filter > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter[data-tone="ok"]    { --fc: #8FE07A; }
.filter[data-tone="pend"]  { --fc: #FFAA55; }
.filter[data-tone="bad"]   { --fc: #FF8080; }
.filter[data-tone="rent"]  { --fc: color-mix(in srgb, var(--rent-bar) 62%, #fff); }
.filter[data-tone="coll"]  { --fc: color-mix(in srgb, var(--coll-bar) 52%, #fff); }
.filter[data-tone="dept"]  { --fc: color-mix(in srgb, var(--dept-bar) 50%, #fff); }
.filter[data-tone="other"] { --fc: #E4E8EE; }
.sidebar .filter input { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; margin: 0; flex: none; border: 0; border-radius: 5px; cursor: pointer;
  background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .3);
  transition: background-color .18s var(--rf-ease), box-shadow .18s var(--rf-ease); }
.sidebar .filter:hover input:not(:checked) { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }
.sidebar .filter input:checked { background: var(--fc) var(--rf-check) center / 11px no-repeat;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 3px color-mix(in srgb, var(--fc) 18%, transparent), 0 3px 10px -3px color-mix(in srgb, var(--fc) 80%, transparent); }
/* crew's "Show" choices are radios but look exactly like the manager's ticks (one look for every role) */
.sidebar .filter input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.filter__n { background: none; padding: 0; border-radius: 0; min-width: 0; font: 500 12px/1 var(--num, var(--sans)); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .45); }
.filter:has(input:checked) .filter__n { color: rgb(255 255 255 / .75); }

/* the foot: who you are, then light/dark, full screen and Sign out; no boxes around any of it */
.sidebar__foot { display: grid; justify-content: stretch; gap: 12px; padding: 14px 14px 14px; border-top: 1px solid rgb(255 255 255 / .1); }
.sidebar__who { display: flex; align-items: center; gap: 11px; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 0; background: none; }
.sidebar__who[hidden] { display: none; }
.sidebar__who .av { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; font-weight: 650; border: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), 0 8px 16px -10px rgb(0 0 0 / .6); }
.sidebar__whoname { flex: 1; min-width: 0; display: grid; gap: 3px; line-height: 1.1; }
.sidebar__whoname b { font-family: var(--serif); font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__whoname span { font-size: 12px; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .58); }
.sidebar__ver { align-self: flex-start; margin: 1px 0 0 auto; font-size: 10px; color: rgb(255 255 255 / .36); font-variant-numeric: tabular-nums; }
.sidebar__bar { display: flex; align-items: center; gap: 6px; }
.sbtool { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: rgb(255 255 255 / .82);
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); transition: background-color .15s ease, color .15s ease; }
.sbtool:hover { background: rgb(255 255 255 / .16); color: #fff; }
.sbtool[hidden] { display: none; }
.sbtool .ico { width: 16px; height: 16px; }
.sbtool .ico--fs-off, .sbtool.is-on .ico--fs-on { display: none; }
.sbtool.is-on .ico--fs-off { display: block; }
.sbout { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 10px;
  font: 600 13px/1 var(--sans); color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  transition: background-color .15s ease; cursor: pointer; }
.sbout:hover { background: rgb(255 255 255 / .18); }
.sbout .ico { width: 15px; height: 15px; }
.sidebar__bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============ v1.32: the event card, redrawn ============
   Top: what, when, where. Under a hairline: where it stands, the flags, the crew, the jobs.
   The booking type is a coloured word, Pending is a word, the status is a glyph and plain words: no badges. */
.cards { gap: 12px; }
.card.bk--rental, .erow.bk--rental   { --bk-ink: var(--rent-fg); }
.card.bk--college, .erow.bk--college { --bk-ink: var(--coll-fg); }
.card.bk--dept, .erow.bk--dept       { --bk-ink: var(--dept-fg); }
.cards .card, .card {
  grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "date main side" "date foot foot";
  column-gap: 20px; row-gap: 0; align-items: start; padding: 17px 20px 12px 16px;
  border-radius: var(--rf-radius-lg); border-left-width: 4px;
  background: linear-gradient(100deg, var(--bk-wash, var(--bg-2)) 0%, var(--bk-wash, var(--bg-2)) 10%, var(--bg-2) 46%);
  box-shadow: var(--rf-card-shadow);
  transition: box-shadow .25s var(--rf-ease), transform .25s var(--rf-ease), border-color .2s ease;
}
.cards .card:hover, .card:hover { background: linear-gradient(100deg, var(--bk-wash-hi, var(--bg-3)) 0%, var(--bk-wash-hi, var(--bg-3)) 12%, var(--bg-2) 50%); box-shadow: var(--rf-card-shadow-hi); transform: translateY(-1px); }
.card.is-open { box-shadow: 0 0 0 2px var(--brand-600), var(--rf-card-shadow-hi); }

.card .card__date, .card.is-today .card__date { grid-area: date; position: static; display: flex; flex-direction: column; align-items: center;
  padding: 1px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; line-height: 1; }
.card .card__mon, .card.is-today .card__mon { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-ink, var(--card-txt-2)); }
.card .card__day, .card.is-today .card__day { font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: -.03em; color: var(--txt-1); margin: 6px 0 5px; font-variant-numeric: lining-nums; }
.card .card__dow, .card.is-today .card__dow { font-size: 11px; letter-spacing: .05em; color: var(--card-txt-2); margin: 0; }
.card.is-today .card__day { color: var(--brand-600); }

.card__main { grid-area: main; min-width: 0; }
.card__kicker { display: flex; align-items: center; flex-wrap: wrap; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--card-txt-2); }
.card__kicker > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: currentColor; opacity: .45; vertical-align: middle; }
.card__kind { color: var(--bk-ink, var(--card-txt-2)); }
.card .card__pend { display: inline; align-self: auto; margin: 0; padding: 0; background: none; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-align: left; color: var(--pend-fg); }
.card__pend::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; border: 1.5px dashed currentColor; vertical-align: -1px; }
.card .card__name { margin-top: 6px; font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.014em; line-height: 1.2; color: var(--txt-1); }
.card__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 8px; font-size: 13px; color: var(--card-txt-2); font-variant-numeric: tabular-nums; }
.fact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fact .ico { width: 14px; height: 14px; opacity: .7; flex: none; }
.fact--time { color: var(--txt-1); }
.fact--time b { font-weight: 600; }
.fact--time .ico { opacity: 1; color: var(--brand-600); }
.fact--setup.is-unset { opacity: .6; }
.card__side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 2px; }

.card__foot { grid-area: foot; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--line) 85%, transparent); min-width: 0; }
.state { --st: var(--warn); --state-tick: var(--bg-2); display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; color: var(--st); }
.state__g { width: 15px; height: 15px; flex: none; }
.state b { font-weight: 650; }
.state__more { color: var(--card-txt-2); font-weight: 500; }
.state__more::before { content: "\00B7"; margin-right: 7px; opacity: .6; }
.state--ok   { --st: var(--ok); }
.state--warn { --st: var(--warn); }
.state--bad  { --st: var(--bad); }
.state--canc { --st: var(--canc-fg); }
.card .card__flags { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0 0 0 18px; border-left: 1px solid color-mix(in srgb, var(--line) 90%, transparent); }
.card .flag { gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--card-txt-2); }
.card .flag:not(.is-on) { opacity: .62; }
.card .flag.is-on.flag--ok, .card .flag.is-on.flag--info, .card .flag.is-on.flag--warn { color: var(--card-txt-1); }
.card .flag__dot { width: 7px; height: 7px; border-width: 1.5px; }
.card .flag.is-on.flag--ok .flag__dot   { background: var(--ok);   border-color: var(--ok); }
.card .flag.is-on.flag--info .flag__dot { background: var(--info); border-color: var(--info); }
.card .flag.is-on.flag--warn .flag__dot { background: var(--warn); border-color: var(--warn); }
.card__avail { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.card__avail .ico { width: 14px; height: 14px; }
.card__crew { display: inline-flex; align-items: center; }
.card .notech { gap: 6px; padding: 0; border: 0; border-radius: 0; font-size: 12.5px; font-weight: 500; color: var(--card-txt-2); }
.cards .card .crewstack .av, .cards .card:hover .crewstack .av { border-color: var(--bg-2); width: 28px; height: 28px; font-size: 10.5px; }
.card .card__bars { display: grid; gap: 4px; flex: none; width: 140px; min-width: 0; }
.card .mini { grid-template-columns: 44px 1fr auto; gap: 8px; font-size: 11px; }
.card .mini--empty { grid-template-columns: 44px 1fr; }
.card .mini--empty .mini__n { text-align: right; }
.card .mini__l { letter-spacing: 0; }
.card .mini__n { font-size: 11px; min-width: 0; }
.card .mini__track { height: 4px; }
/* the compact list wears the same status words */
.erow .state { font-size: 12px; gap: 6px; }
.erow .state__g { width: 13px; height: 13px; }
.erow__pend { font-size: 10px; font-weight: 700; letter-spacing: .1em; }

@media (max-width: 860px) {
  .cards .card, .card { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 14px 10px 12px; }
  .card .card__day, .card.is-today .card__day { font-size: 28px; margin: 5px 0 4px; }
  .card .card__name { font-size: 17.5px; }
}
@media (max-width: 620px) {
  .cards .card, .card { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "date main" "side side" "foot foot"; }
  .card__side { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; padding-top: 0; }
  .card__foot { gap: 8px 14px; margin-top: 12px; }
  .card .card__flags { padding-left: 0; border-left: 0; }
  .card__facts { gap: 3px 14px; font-size: 12.5px; }
}

/* ============ v1.40: Phesti AI, changes by typing or Dictation ============
   The button waits in the bottom-right corner. Pressed, a card unfolds up and to the left from
   it (clip-path, so nothing inside reflows) and stays in that corner, the cursor in the box for
   the computer's own Dictation. The words run along the bottom beside the button, the proposed changes stack above them, and the card's height eases
   upward as they arrive. Only clip-path, height, opacity and transform animate, on one curve. */
.vb { --vb-ease: cubic-bezier(.32, .72, 0, 1); --vb-m: 54px;
  position: fixed; right: 24px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 65; width: var(--vb-w, 400px); height: 0;
  transform: translateX(var(--vb-shift, 0px)); transition: transform .5s var(--vb-ease), opacity .25s ease; pointer-events: none; }
.vb[hidden] { display: none; }
.vb__card { position: absolute; right: 0; bottom: 0; width: 100%; min-height: var(--vb-m); overflow: hidden;
  border-radius: 18px; background: var(--bg-2); pointer-events: auto;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 22%, var(--line)), 0 24px 60px -24px rgb(15 23 42 / .4), 0 4px 12px -6px rgb(15 23 42 / .12);
  clip-path: inset(calc(100% - var(--vb-m)) 0 0 calc(100% - var(--vb-m)) round 16px);
  transition: clip-path .42s var(--vb-ease), height .42s var(--vb-ease); }
.vb.is-open .vb__card { clip-path: inset(0 0 0 0 round 18px); transition-duration: .55s, .42s; }
.vb__in { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }

/* the mic: always in the corner, the card unfolds from it */
.vb__mic { position: absolute; right: 0; bottom: 0; width: var(--vb-m); height: var(--vb-m); display: grid; place-items: center;
  border: 0; border-radius: 16px; cursor: pointer; pointer-events: auto; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 12px 26px -12px color-mix(in srgb, var(--brand-800) 80%, transparent);
  transition: transform .55s var(--vb-ease), border-radius .55s var(--vb-ease), box-shadow .4s ease; }
.vb.is-open .vb__mic { transform: scale(.74); border-radius: 13px; box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset; }
.vb__mic .ico { position: relative; z-index: 1; width: 22px; height: 22px; transition: transform .55s var(--vb-ease); }
.vb.is-open .vb__mic .ico { transform: scale(1.18); }
.vb__mic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgb(255 255 255 / .45), transparent 70%); opacity: 0; transition: opacity .2s ease; }
.vb__mic:hover::after { opacity: .25; }
.vb__mic:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }

/* what's inside arrives once the card has opened, and leaves first */
.vb__head, .vb__drop, .vb__say { opacity: 0; transform: translateY(8px); transition: opacity .14s ease, transform .3s var(--vb-ease); }
.vb.is-open .vb__head, .vb.is-open .vb__say { opacity: 1; transform: none; transition: opacity .3s ease .16s, transform .5s var(--vb-ease) .12s; }
.vb__head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px 14px; }
.vb__ai { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 8px 3px 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--brand-700); background: color-mix(in srgb, var(--brand-500) 12%, transparent); }
.vb__ai .ico { width: 13px; height: 13px; color: var(--brand-500); }
:root[data-theme="dark"] .vb__ai { color: var(--brand-300); }
.vb__status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--brand-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb__status:empty { display: none; }
.vb__status::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.vb[data-phase="thinking"] .vb__status::before, .vb[data-phase="applying"] .vb__status::before { animation: vb-dot 1.2s ease-in-out infinite; }
@keyframes vb-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.vb__status[data-kind="bad"] { color: var(--bad); }
:root[data-theme="dark"] .vb__status:not([data-kind="bad"]) { color: var(--brand-300); }
.vb__head > .vb__btn { margin-left: auto; }

.vb__drop { display: flex; flex-direction: column; min-height: 0; }
.vb__drop[hidden] { display: none; }
.vb__drop.is-open { opacity: 1; transform: none; transition: opacity .28s ease .05s, transform .45s var(--vb-ease); }
.vb__body { overflow: auto; max-height: calc(100dvh - 260px); padding: 8px 14px 12px; }
.vb__body:empty { display: none; }
.vb__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 12px; }
.vb__foot[hidden] { display: none; }
.vb__foot .btn { display: inline-flex; align-items: center; gap: 7px; }
.vb__foot .btn .ico { width: 15px; height: 15px; }
.vb__foot .btn--primary { min-width: 104px; justify-content: center; }

/* the words, along the bottom beside the mic */
.vb__say { display: flex; align-items: flex-end; gap: 10px; min-height: var(--vb-m); padding: 9px calc(var(--vb-m) + 2px) 9px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.vb__wave { display: inline-flex; align-items: center; gap: 3px; height: 36px; flex: none; }
.vb__wave i { display: block; width: 3px; height: 20px; border-radius: 2px; background: var(--brand-500); transform: scaleY(.18); transition: transform .3s var(--vb-ease); }
/* the bars appear only while Phesti AI is working */
.vb:not([data-phase="thinking"]):not([data-phase="applying"]) .vb__wave { display: none; }
.vb__wave i:nth-child(2) { animation-delay: -.2s; } .vb__wave i:nth-child(3) { animation-delay: -.4s; }
.vb__wave i:nth-child(4) { animation-delay: -.6s; } .vb__wave i:nth-child(5) { animation-delay: -.8s; }
.vb[data-phase="thinking"] .vb__wave i, .vb[data-phase="applying"] .vb__wave i { animation: vb-think 1.2s ease-in-out infinite; }
@keyframes vb-think { 0%, 100% { transform: scaleY(.18); opacity: .35; } 40% { transform: scaleY(.5); opacity: 1; } }
.vb__text { flex: 1; min-width: 0; min-height: 36px; max-height: 96px; padding: 8px 0; border: 0; outline: none; resize: none; overflow: hidden; background: transparent;
  font: 500 15px/1.35 var(--sans); color: var(--txt-1); }
.vb__text::placeholder { color: var(--txt-3); font-weight: 450; }
.vb[data-phase="thinking"] .vb__text { color: var(--txt-3); }
.vb__btn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: none; color: var(--txt-3); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.vb__say .vb__btn { margin-bottom: 1px; }
.vb__btn:hover:not(:disabled) { background: var(--bg-3); color: var(--txt-1); }
.vb__btn:disabled { opacity: .4; cursor: default; }
.vb__btn .ico { width: 16px; height: 16px; }
.vb__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.cmd__code { margin-left: 6px; font: 500 11px/1 var(--mono, ui-monospace, monospace); color: var(--txt-3); }

/* narrow screens: the corner mic sits under the menu drawer; on a phone the event panel covers
   the whole screen, so the mic steps aside while it's open */
@media (max-width: 860px) { .vb { z-index: 34; } }
@media (max-width: 699px) {
  body.panel-open .vb:not(.is-open) { opacity: 0; }
  body.panel-open .vb:not(.is-open) .vb__mic { pointer-events: none; }
}
@media (max-width: 620px) {
  .vb { --vb-m: 52px; }
  .vb__text { font-size: 16px; }
}
.cmd__msg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--txt-2); }
.cmd__msg--bad { color: var(--bad); }
.cmd__consent p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--txt-2); }
.cmd__consent p:last-child { margin-bottom: 0; }
.cmd__consent p b { color: var(--txt-1); font-weight: 650; }
.cmd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmd__row { --tone: var(--brand-600); display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 11px 13px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1); animation: vb-row .36s var(--rf-ease) both; }
.cmd__row:nth-child(2) { animation-delay: .04s; } .cmd__row:nth-child(3) { animation-delay: .08s; } .cmd__row:nth-child(n+4) { animation-delay: .12s; }
@keyframes vb-row { from { opacity: 0; transform: translateY(4px); } }
.cmd__row--new  { --tone: var(--ok); }
.cmd__row--crew { --tone: var(--info); }
.cmd__row--bad  { --tone: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.cmd__ri { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); }
.cmd__ri .ico { width: 17px; height: 17px; }
.cmd__rm { display: grid; gap: 2px; min-width: 0; }
.cmd__rv { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tone); }
.cmd__rt { font-family: var(--serif); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--txt-1); overflow-wrap: anywhere; }
.cmd__rs { font-size: 12.5px; color: var(--txt-3); }
.cmd__rl { display: grid; gap: 3px; margin-top: 6px; font-size: 13px; }
.cmd__rl > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cmd__rl i { font-style: normal; color: var(--txt-3); min-width: 84px; }
.cmd__rl s { color: var(--txt-3); text-decoration-thickness: 1px; }
.cmd__to { font-weight: 650; color: var(--txt-1); }
.cmd__to::before { content: "\2192"; margin-right: 8px; color: var(--txt-3); font-weight: 400; }
.cmd__row.is-done { --tone: var(--ok); }
.cmd__row.is-failed { border-color: var(--bad); }
.cmd__row.is-skipped { opacity: .5; }
.cmd__refused { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cmd__refused li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--txt-3); }
.cmd__refused .ico { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--bad); }
.cmd__refused + .cmd__msg, .cmd__list + .cmd__msg { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .vb, .vb__card, .vb__mic, .vb__mic .ico, .vb__head, .vb__drop, .vb__say { transition: none !important; }
  .vb__wave i, .vb__status::before, .cmd__row { animation: none !important; }
}
/* four buttons in the sidebar foot (v1.43.0): Sign out keeps to one line */
.sbout { white-space: nowrap; padding: 0 12px 0 10px; }
.sidebar__bar { gap: 5px; }

/* Account settings (v1.44.0): name, colour, password */
.acct { display: grid; gap: 18px; }
.acct fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.acct legend { padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.acct__me { display: flex; align-items: flex-end; gap: 14px; }
.acct__av { width: 48px; height: 48px; font-size: 16px; flex: none; transition: background-color .2s var(--rf-ease); }
.acct__name { flex: 1; min-width: 0; }
.acct__colors { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.acct__colors legend { width: 100%; }
.acct__swatch { position: relative; cursor: pointer; }
.acct__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.acct__swatch span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: transform .15s var(--rf-ease), box-shadow .15s var(--rf-ease); }
.acct__swatch--auto span { background: var(--bg-3); color: var(--txt-2); font: 600 11px/1 var(--sans); }
.acct__swatch:hover span { transform: translateY(-1px); }
.acct__swatch input:checked + span { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--brand-600, #00685E); }
.acct__swatch input:focus-visible + span { outline: 2px solid var(--brand-600, #00685E); outline-offset: 3px; }
.acct__pw { padding-top: 16px !important; border-top: 1px solid var(--line) !important; }
.acct__dot, .sbtool.has-dot::after { width: 7px; height: 7px; border-radius: 50%; background: var(--golden-yellow, #FFB500); }
.acct__dot { display: inline-block; }
.sbtool { position: relative; }
.sbtool.has-dot::after { content: ""; position: absolute; top: 6px; right: 6px; box-shadow: 0 0 0 2px rgb(0 0 0 / .25); }
.pwform__err { margin: 0; color: var(--bad); font-size: 13.5px; }

/* People (v1.45.0): a manager's own people */
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px 14px;
  padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.prow--tech { grid-template-columns: auto minmax(0, 1fr) auto; }
.prow .av { width: 36px; height: 36px; font-size: 13px; }
.prow__who { display: grid; gap: 2px; min-width: 0; }
.prow__who > b { font-weight: 600; color: var(--txt-1); overflow-wrap: anywhere; }
.prow__who > span { font-size: 13px; color: var(--txt-3); overflow-wrap: anywhere; }
.prow__you { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--brand-600); letter-spacing: .04em; text-transform: uppercase; }
.prow__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ptag { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px;
  color: var(--txt-2); background: var(--bg-3); border: 0; }
.ptag .ico { width: 12px; height: 12px; }
.ptag--warn { color: var(--pend-fg); background: var(--pend-wash, #FFF4E5); }
.ptag--btn { cursor: pointer; color: var(--brand-600); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.ptag--btn:hover { background: var(--bg-3); }
.prow__role .segpick__b:disabled { cursor: default; opacity: .75; }
.prow__acts { display: flex; gap: 4px; justify-content: flex-end; }
.prow__acts .is-warn { color: var(--bad); font-weight: 600; }
.plink { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 8px; max-width: 360px; }
.plink__list { max-height: 220px; overflow: auto; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: var(--bg-1); }
.plink__o { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; color: var(--txt-1); }
.plink__o:hover { background: var(--bg-3); }
.plink__o .av { width: 26px; height: 26px; font-size: 10px; }
.padd { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; align-items: end; padding: 16px; margin-bottom: 18px; }
.padd__acts { display: flex; gap: 8px; justify-content: flex-end; }
.pwshow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px;
  background: color-mix(in srgb, var(--golden-yellow, #FFB500) 12%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--golden-yellow, #FFB500) 55%, transparent); }
.pwshow__l { font-weight: 600; color: var(--txt-1); }
.pwshow code { font: 600 17px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--txt-1); user-select: all; }
.pwshow .btn { margin-left: auto; }
@media (max-width: 760px) {
  .prow { grid-template-columns: auto minmax(0, 1fr); }
  .prow__role, .prow__acts, .prow__fixed { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; }
}
/* v1.46.0: icons, the password on the person's own row */
.prow__acts { min-width: 72px; }
.prow__acts .iconbtn { width: 34px; height: 34px; border-radius: 9px; }
.iconbtn--danger:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.prow__fixed { justify-self: end; font-weight: 600; }
.prow__pw { grid-column: 1 / -1; margin: 4px 0 0; }

/* Activity and History (v1.47.0) */
.act { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.act__day { margin: 18px 0 6px; font: 600 15px/1.2 var(--serif); color: var(--txt-1); }
.act__day:first-child { margin-top: 0; }
.act__row { display: grid; grid-template-columns: 74px 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 10px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.act__row time { font-size: 12.5px; color: var(--txt-3); padding-top: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act__row .av { width: 26px; height: 26px; font-size: 10px; }
.act__say { font-size: 14px; line-height: 1.45; color: var(--txt-2); overflow-wrap: anywhere; padding-top: 3px; }
.act__say b { color: var(--txt-1); font-weight: 600; }
.act__ev { border: 0; background: var(--bg-3); color: var(--brand-600); font: 600 12.5px/1 var(--sans); padding: 4px 8px; border-radius: 6px; cursor: pointer; margin-left: 4px; }
.act__ev:hover { background: color-mix(in srgb, var(--brand-600) 12%, var(--bg-2)); }
.act__none { color: var(--txt-3); padding: 12px 2px; }
.act__q { max-width: 260px; }
.act--panel .act__row { grid-template-columns: 70px 26px minmax(0, 1fr); }
@media (max-width: 760px) { .act__row { grid-template-columns: 26px minmax(0, 1fr); } .act__row time { grid-column: 1 / -1; padding: 0; } }

/* Roles (v1.47.0) */
.roles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.roles__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px auto; align-items: center; gap: 8px; }
.roles__move { display: flex; gap: 2px; }
.roles__move .iconbtn, .roles__row > .iconbtn { width: 32px; height: 32px; border-radius: 8px; }
.roles__move .iconbtn:disabled, .roles__row > .iconbtn:disabled { opacity: .3; cursor: default; }
.roles__n { text-align: center; font-size: 12.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.roles__add { display: flex; gap: 8px; }
.roles__add .input { flex: 1; }