*{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{font-weight:400}  /* headings default to bold; the design tops out at 400 */
body{margin:0;background:var(--canvas);color:var(--ink-900);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
button{font-family:var(--font-sans)}
input,select,textarea{font-family:var(--font-sans);font-size:14px;width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-2);color:var(--ink-900);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--paper)}
label{display:block;font-size:10.5px;color:var(--ink-300);margin:14px 0 5px;text-transform:uppercase;letter-spacing:.07em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:400;color:#fff;background:var(--ink-900);border:1px solid var(--ink-900);border-radius:999px;padding:11px 20px;cursor:pointer;box-shadow:var(--shadow-cta)}
.btn:hover{background:var(--ink-800)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink-800);border-color:var(--border-strong);box-shadow:none}
.btn.ghost:hover{background:var(--surface-1)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.danger{background:var(--danger-600,#b23b3b);border-color:var(--danger-600,#b23b3b)}
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-700)}
/* An outlined chip: the design's second chip treatment, used wherever a
   chip sits on white and must not read as a filled tag. */
.pill--o{background:transparent;border:1px solid var(--border);color:var(--ink-600);
         font-size:12.5px;padding:7px 13px}
.pill--opt{font-size:13px;padding:8px 14px}
/* A quiet, filled button — the design's light chip, not a call to action. */
.btn.btn--soft{background:var(--surface-2);color:var(--ink-900);border-color:var(--border);
               box-shadow:none;font-size:12px}
.btn.btn--soft:hover{background:var(--surface-3)}
.btn__n{opacity:.6}
.pill.ok{background:var(--success-100);color:var(--success-600)}
.pill.warn{background:var(--warning-100);color:var(--warning-600,#9a6a15)}
.pill.bad{background:var(--danger-100,#f7e4e1);color:var(--danger-600,#b23b3b)}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:400px;max-width:100%;background:var(--paper);border:1px solid var(--border);border-radius:22px;padding:34px;box-shadow:var(--shadow-lg)}
.brand{font-weight:700;font-size:26px;letter-spacing:-.02em}
.brand span{color:var(--accent)}

/* shell */
.shell{min-height:100vh;background:var(--canvas,#FAFAF9)}
.side{position:sticky;top:104px;align-self:start;width:236px;flex:0 0 236px;padding:0;background:none;border:0}
.side .brand{padding:6px 10px 18px}
.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--ink-600);cursor:pointer;border:none;background:none;text-align:left;width:100%}
.nav:hover{background:var(--surface-1)}
.nav.active{background:var(--surface-1);color:var(--ink-900)}
.nav .lbl{flex:1}
.side-foot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-500)}
.main{flex:1;min-width:0;padding:0}
.head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-300)}
/* A display title, not a heading tag with the default weight left on. */
h1{font-size:32px;letter-spacing:-.03em;line-height:1.08;margin:2px 0 4px;font-weight:400}
/* The design never sets a weight above 400; the UA default on a heading tag
   was the last place bold was still creeping in. */
.sub{color:var(--ink-500);font-size:14px;margin-bottom:22px}
.orgpick{margin-left:12px;max-width:230px}

.card{background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px}
.card h3{margin:0 0 4px;font-size:16px}
.card .muted{color:var(--ink-500);font-size:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--border)}
.row:first-of-type{border-top:none}
/* The spacer that pushes whatever follows to the right edge. It was scoped to
   `.row`, so in every other flex container — the property menu, the tray, the
   thread header — it quietly did nothing and the trailing element sat wherever
   the text left it. */
/* `flex:1` — basis 0, exactly what `.row .grow` had. `1 1 auto` would
   size siblings by their content, so two spacers in one row stopped
   being equal columns. */
.grow{flex:1;min-width:0}
/* `.meta` had only descendant-scoped rules, so a `.meta` anywhere else —
   the thread header, the contacts row, the settings hub, the survey head —
   fell back to the body's 16px in full-strength ink and read as body copy. */
.meta{font-size:13px;color:var(--ink-400)}
.row .name{font-size:14.5px;color:var(--ink-900)}
.row .meta{font-size:12.5px;color:var(--ink-400);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:8px 15px;border-radius:999px;font-size:13px;cursor:pointer;border:1px solid var(--border-strong);background:var(--paper);color:var(--ink-600)}
.tab.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink-900);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);font-size:14px;z-index:100}
.err{color:var(--danger-600,#b23b3b);font-size:13px;margin-top:8px}
.modal-scrim{position:fixed;inset:0;background:rgba(20,22,26,.4);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:8vh 20px;z-index:90;overflow-y:auto}
.modal{width:520px;max-width:100%;background:var(--paper);border-radius:20px;padding:26px;box-shadow:var(--shadow-xl)}
.modal h2{margin:0 0 4px;font-size:20px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:13.5px}
.kv .k{color:var(--ink-300);text-transform:uppercase;font-size:10.5px;letter-spacing:.07em}
.mono{font-family:var(--font-mono);font-size:12.5px;word-break:break-all}
.qr{display:block;width:230px;height:230px;margin:14px auto;border-radius:12px;border:1px solid var(--border)}
.msg{padding:13px 16px;border-radius:14px;margin-bottom:8px;max-width:78%;font-size:14px;line-height:1.55}
/* Attribution and time belong under the bubble, on the pane, not inside it —
   inside the outgoing bubble they were white text describing white text. */
.msgw{display:flex;flex-direction:column;max-width:78%}
.msgw .msg{max-width:100%;margin-bottom:0}
.msgw.in{align-self:flex-start;align-items:flex-start}
.msgw.out{align-self:flex-end;align-items:flex-end;margin-left:auto}
.msg__f{display:flex;align-items:baseline;gap:8px;margin-top:5px;
        font-size:11px;color:var(--ink-400)}
.msg__t{font-size:11px;color:var(--ink-300)}
.msg.in{background:var(--paper);border:1px solid var(--border);align-self:flex-start}
.msg.out{background:var(--ink-900);color:#fff;align-self:flex-end;margin-left:auto}
.msg .who{font-size:11px;opacity:.6;margin-bottom:3px}
.thread{display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto;padding:6px 2px 12px}
.empty{color:var(--ink-400);font-size:14px;padding:30px 0;text-align:center}
.spin{color:var(--ink-400);font-size:13px}

/* A group of toggle buttons that belong together — the coupon's scope, for
   one. .row spreads its children apart, which reads as unrelated controls. */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0}


/* The initial standing in for a guest photo. */
.avatar{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
        display:grid;place-items:center;font-size:13px;
        background:var(--surface-3);color:var(--ink-600)}

/* The concierge's proposal, set apart from the reply box so nobody sends it
   by accident, and never styled as though it were already a message. */
.draft{margin-top:12px;padding:12px 14px;border:1px dashed var(--border-strong,#d3d8dd);
       border-radius:10px;background:var(--surface-1,#f7f8fa)}
.draft .row{border-top:0;padding-top:0}
.draft textarea{width:100%}
/* Provenance sits beside the sender, quiet but always present. */
.prov{margin-left:8px;font-size:11px;color:var(--ink-400);font-weight:400}

/* Publish state sits above the builder, so nobody edits for ten minutes
   without noticing that guests are still seeing last week's copy. */
.publishbar{border-left:3px solid var(--ink-900)}
.bell.on{border-color:var(--ink-900)}


/* ---- guest portal builder ------------------------------------------------
   Three levels, as the design has it: which stage, which screen of that stage,
   and the controls that shape it. Previously this was one long scroll. */
/* The stage bar is a bare row on the canvas, not a card of its own. */
.portalbar{margin-bottom:26px}
.portalbar .row{border-top:0;padding:0}
.portalbar .btn.sm{padding:12px 24px}
/* A segmented track: three faces of one portal, not three actions. */
.stageseg{display:inline-flex;background:var(--paper);border:1px solid var(--border);
          border-radius:999px;padding:4px}
.portalbar .stageseg .btn.sm,.stageseg .btn{border:0;box-shadow:none;background:transparent;color:var(--ink-400);
               padding:11px 26px;font-size:13px}
.stageseg .btn:not(.ghost){background:var(--surface-2);color:var(--ink-900)}
.stageseg .btn:hover{background:var(--surface-1)}
.stageseg .btn:not(.ghost):hover{background:var(--surface-2)}
.builder{display:flex;gap:28px;align-items:flex-start}

/* A control row: what it is on the left, the control on the right. */
.brow{display:flex;gap:28px;align-items:flex-start;padding:22px 0;
      border-bottom:1px solid var(--surface-3)}
.brow__lbl{flex:0 0 210px}
.brow__lbl .name{font-size:14px}
.brow--tog .brow__lbl .name{font-size:14.5px}
.brow__lbl .meta{font-size:12px;color:var(--ink-300);margin-top:3px;line-height:1.5}
.brow__in{flex:1;min-width:0}
input.brow__in,textarea.brow__in{width:100%}
/* A field on a rule, as the design writes them — not a boxed form control. */
input.brow__in{border:0;border-bottom:1px solid var(--border-strong);border-radius:0;
               background:transparent;padding:8px 0;font-size:15px}
input.brow__in:focus{background:transparent;border-color:var(--ink-900)}
textarea.brow__in{border:1px solid var(--border);border-radius:14px;
                  background:var(--surface-1);padding:14px 16px;font-size:14.5px;
                  line-height:1.55;min-height:84px}
/* A toggle row is its own line: what it does on the left, the switch hard
   against the right edge. */
.brow--tog{justify-content:space-between}
.brow--tog .brow__lbl{flex:1}
.brow--tog .brow__in{flex:0 0 auto}
/* A list runs full width: a 210px label column beside it left the rows in a
   narrow gutter. */
.brow--wide{flex-direction:column;gap:14px}
.brow--wide .brow__lbl{flex:0 0 auto;width:100%}
/* The entry cards, not the add control below them — that is a form row,
   and giving it a card edge made it read as one more entry. */
.brow--wide .brow__in .row:not(.row--add){background:var(--surface-1);
                           border:1px solid var(--surface-3);
                           border-radius:14px;padding:12px 14px;margin-bottom:8px}
.vis{display:flex;align-items:center;gap:12px;background:var(--paper);
     border:1px solid var(--border);border-radius:999px;padding:10px 16px 10px 20px}
.vis .meta{font-size:12.5px;color:var(--ink-600)}
.shot{margin-bottom:8px;border:1px solid var(--border);border-radius:10px;overflow:hidden;
      max-width:420px}
.shot img{display:block;width:100%;height:180px;object-fit:cover}

/* The image slot. Big enough to judge a crop by, and it says what it wants. */
.drop{position:relative;width:100%;max-width:440px;height:200px;cursor:pointer;
      border:1.5px dashed var(--border-strong,#d3d8dd);border-radius:14px;
      background:var(--surface-1,#f7f8fa);display:grid;place-items:center;
      overflow:hidden;transition:border-color .12s,background .12s}
.drop:hover,.drop:focus{border-color:var(--ink-400);outline:none}
.drop.over{border-color:var(--ink-900);background:var(--surface-2,#e9ecef)}
.drop.busy{opacity:.7}
.drop img{width:100%;height:100%;object-fit:cover;display:block}
.drop__empty{text-align:center;color:var(--ink-500);font-size:13.5px;line-height:1.7}
.drop__icon{font-size:22px;opacity:.5}
.drop__over{position:absolute;inset:0;display:grid;place-items:center;
            background:rgba(255,255,255,.78);font-size:13.5px}
.meta.err{color:#b3261e}

/* ---- live guest-app preview ---------------------------------------------
   A real iframe of the portal, framed as a phone so its proportions are
   honest. Sticky, because the point is to watch it while you edit. */
.livepv{flex:0 0 406px;position:sticky;top:16px}
.livepv__cap{font-size:11.5px;color:var(--ink-300);line-height:1.5;margin-top:12px}
.livepv__bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.livepv__bar .name{font-size:14px}
.livepv__bar .meta{font-size:12.5px;color:var(--ink-400)}
.phone{position:relative;width:100%;height:818px;margin:10px 0;
       background:var(--surface-2);border:1px solid var(--border);border-radius:42px;
       padding:11px}
.phone__notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);
              width:88px;height:24px;background:#1E1D1B;border-radius:13px;z-index:3}
.phone iframe{width:100%;height:100%;border:0;border-radius:32px;background:#FAFAF9;
              display:block}
.phone__empty{display:grid;place-items:center;height:100%;border-radius:32px;
              background:#FAFAF9;color:var(--ink-400);font-size:13.5px}
@media (max-width: 1400px){ .livepv{display:none} }

/* ---- sidebar ------------------------------------------------------------
   The property being run, its sections with counts, and the portal's own
   screens nested where they belong. */
.side-head{padding:6px 12px 18px;border-bottom:1px solid var(--border);margin-bottom:14px}
.side-head__name{font-size:15px;letter-spacing:-.01em;color:var(--ink-900)}
.side-head__role{font-size:12.5px;color:var(--ink-400);margin-top:2px}

.nav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
     appearance:none;border:0;background:none;font:inherit;font-size:14px;
     color:var(--ink-600);padding:12px 14px;border-radius:12px;cursor:pointer}
.nav:hover{background:var(--surface-1,#f2f4f6)}
.nav .lbl{flex:1;min-width:0}
.nav__ic{flex:0 0 auto;width:18px;height:18px;color:var(--ink-300);display:block}
.nav__ic svg{width:18px;height:18px;display:block}
.nav__n{font-size:12px;color:var(--ink-400)}
.nav.active{background:#F6EEE8;color:#1E1D1B}
.nav.active .nav__ic{color:#A2603C}
.nav.active .nav__n{color:var(--ink-600)}

/* The portal's panels, nested under it. */
.subnav{display:flex;flex-direction:column;gap:1px;margin:5px 0 8px 22px;
        padding-left:12px;border-left:1px solid var(--border)}
.subnav__head{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
              color:var(--ink-300);padding:8px 10px 6px}
/* Flex, not block: the row carries a title and a right-aligned "Hidden" tag,
   and a block container gave the spacer between them nothing to do. */
.subnav__item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;appearance:none;border:0;
              background:none;font:inherit;font-size:13.5px;color:var(--ink-400);
              padding:9px 12px;border-radius:9px;cursor:pointer}
.subnav__item:hover{background:var(--surface-1,#f2f4f6)}
.subnav__item.on{background:var(--ink-900);color:#fff}

.side-user{display:flex;align-items:center;gap:10px}
.side-user__name{display:block;font-size:13.5px;color:var(--ink-900)}
.side-user__sub{display:block;font-size:12px;color:var(--ink-400)}
.side-user__out{appearance:none;border:1px solid var(--border);background:none;
                border-radius:999px;width:30px;height:30px;cursor:pointer;
                color:var(--ink-500);font-size:13px;line-height:1}
.side-user__out:hover{border-color:var(--border-strong);color:var(--ink-900)}

/* A switch, because that is what the design uses and what a toggle reads as.
   The button is the control; the span is the knob. */
.sw{position:relative;appearance:none;border:0;cursor:pointer;padding:0;
    width:42px;height:24px;border-radius:999px;background:var(--border-strong);
    transition:background .15s}
.sw.on{background:var(--ink-800)}
.sw > span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
           background:#fff;transition:transform .15s}
.sw.on > span{transform:translateX(18px)}
.sw:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}

/* The phone's status strip — small, but its absence is why the frame read as
   a box rather than a device. */
.phone__status{position:absolute;top:24px;left:34px;right:34px;z-index:4;
               display:flex;justify-content:space-between;align-items:center;
               font-size:12px;color:#1E1D1B;pointer-events:none}
.phone__sig{display:flex;align-items:center;line-height:0}
.phone iframe{margin-top:0}
.drop__ph{color:var(--ink-600);font-size:13.5px;margin-bottom:4px}
/* The app inside starts below the status bar, as it does on a real device. */
.phone iframe{padding-top:0}
.phone__home{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
             width:126px;height:5px;border-radius:3px;background:rgba(30,29,27,.28);z-index:4}

/* ---- shell --------------------------------------------------------------
   A bar across the whole window, then a transparent sidebar and the page
   beside it. The sidebar has no panel of its own: the design keeps one
   background and lets the cards do the separating. */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
        justify-content:space-between;gap:24px;padding:18px 32px;
        background:var(--canvas,#FAFAF9);border-bottom:1px solid var(--border)}
.topbar__id{display:flex;align-items:baseline;gap:12px;min-width:0}
.topbar__prop{font-size:15px;letter-spacing:-.01em;color:var(--ink-900)}
.topbar__role{font-size:12.5px;color:var(--ink-400)}
.topbar__tools{display:flex;align-items:center;gap:12px}
.body{display:flex;align-items:flex-start;gap:28px;max-width:1720px;margin:0 auto;padding:32px}

/* Search is a pill that opens a palette, not a field sitting in the chrome. */
.cmdk{display:flex;align-items:center;gap:10px;min-width:230px;cursor:pointer;
      appearance:none;border:1px solid transparent;border-radius:999px;
      background:var(--surface-2,#F1F0ED);padding:9px 14px;
      font:inherit;font-size:13.5px;color:var(--ink-400)}
.cmdk:hover{border-color:var(--border-strong)}
.cmdk__l{flex:1;text-align:left}
.cmdk__k{font-size:11px;color:var(--ink-300);border:1px solid var(--border-strong);border-radius:6px;padding:1px 6px}
.cmdk__ic{font-size:12px;color:var(--ink-300)}

.palette{position:fixed;inset:0;z-index:60;background:rgba(20,19,17,.28);
         display:flex;justify-content:center;padding-top:14vh}
.palette__box{width:620px;max-width:92vw;max-height:70vh;display:flex;flex-direction:column;
              background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
              box-shadow:0 24px 60px rgba(20,19,17,.18)}
/* The field is one item in a row: a glyph, the query, and the way out. */
.palette__hd{display:flex;align-items:center;gap:12px;padding:18px 22px;
             border-bottom:1px solid var(--border)}
.palette__ic{flex:0 0 auto;font-size:15px;color:var(--ink-300)}
.palette__esc{flex:0 0 auto;font-size:11px;color:var(--ink-400);
              border:1px solid var(--border-strong);border-radius:6px;padding:3px 8px}
.palette__in{flex:1;min-width:0;width:auto;border:0;border-radius:0;background:transparent;
             padding:0;font:inherit;font-size:20px;font-weight:300;letter-spacing:-.02em;
             outline:none}
.palette__in:focus{background:transparent}
.palette__out{overflow:auto;padding:8px}
.palette__row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
              appearance:none;border:0;background:none;cursor:pointer;font:inherit;
              padding:11px 14px;border-radius:12px}
.palette__row:hover{background:var(--surface-1,#FAFAF9)}
.palette__i{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;
            place-items:center;background:var(--surface-3);font-size:13px}
.palette__t{display:block;font-size:14.5px}
.palette__d{display:block;font-size:12.5px;color:var(--ink-400);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette__empty{padding:22px 20px;color:var(--ink-400);font-size:13.5px}

/* Notifications */
.bellwrap{position:relative}
.bell{position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;
      appearance:none;border:0;background:var(--surface-2,#F1F0ED);
      font-size:14px;color:var(--ink-600)}
.bell__dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
           background:#A2603C;border:2px solid var(--surface-2)}
.tray{position:absolute;top:calc(100% + 10px);right:0;width:376px;z-index:40;
      background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;
      box-shadow:0 18px 44px rgba(20,19,17,.12);max-height:480px;overflow-y:auto}
.tray__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
            padding:16px 18px 12px;background:#fff;border-bottom:1px solid var(--surface-3);
            font-size:14.5px}
.tray__all{appearance:none;border:0;background:none;cursor:pointer;font:inherit;
           font-size:12px;color:#A2603C}
.tray__row{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;
           appearance:none;border:0;border-bottom:1px solid var(--surface-3);background:none;
           cursor:pointer;font:inherit;padding:15px 18px}
.tray__row:hover{background:var(--surface-1,#FAFAF9)}
.tray__ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;
          place-items:center;background:#F6EEE8;color:#A2603C;font-size:13px}
.tray__ic.warn{background:#FBF1DC;color:#96731C}
.tray__t{display:block;font-size:13.5px}
.tray__d{display:block;font-size:12.5px;color:var(--ink-400);margin-top:3px;line-height:1.45}
.tray__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#A2603C;margin-top:12px}
.tray__empty{padding:20px 16px;color:var(--ink-400);font-size:13.5px}

/* Property switcher */
.propwrap{position:relative}
.proppill{display:flex;align-items:center;gap:9px;cursor:pointer;appearance:none;white-space:nowrap;
          border:1px solid transparent;border-radius:999px;
          background:var(--surface-2,#F1F0ED);padding:9px 16px;font:inherit;font-size:13.5px;
          color:var(--ink-600)}
.proppill:hover{border-color:var(--border-strong)}
.proppill__c{font-size:10px;color:var(--ink-400)}
.propmenu{position:absolute;top:calc(100% + 10px);right:0;width:312px;z-index:40;
          background:#fff;border:1px solid var(--border);border-radius:18px;padding:8px;
          box-shadow:0 18px 44px rgba(20,19,17,.12)}
.propmenu__cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
               color:var(--ink-300,#A9A7A1);padding:10px 12px 8px}
.propmenu__row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
               appearance:none;border:0;background:none;cursor:pointer;font:inherit;
               border-radius:12px;padding:10px 12px;font-size:14px}
.propmenu__row:hover{background:var(--surface-1,#FAFAF9)}
.propmenu__i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;
             place-items:center;background:#262421;color:#fff;font-size:13px}
/* A long property or place name must not shove the checkbox out of its
   column — the ticks only read as a column if they line up. */
.propmenu__n,.propmenu__l{display:block;overflow:hidden;text-overflow:ellipsis;
                          white-space:nowrap}
.propmenu__l{font-size:12px;color:var(--ink-300,#A9A7A1)}
.propmenu__rule{height:1px;background:#EDECE9;margin:6px 10px}
/* A checkbox, because the scope is a set — a tick that only ever appears on
   one row said "pick one", which is no longer what this menu does. */
.propmenu__ck{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;
              place-items:center;font-size:11px;
              border:1px solid var(--border);background:#fff;color:transparent}
.propmenu__ck.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.propmenu__add{color:var(--ink-900);font-size:14px}
.propmenu__note{margin:0;padding:8px 12px 6px;font-size:11.5px;line-height:1.45;
                color:var(--ink-300,#A9A7A1)}

/* Page header */
.head h1{margin:0}
.lede{margin:10px 0 0;max-width:560px;font-size:14px;line-height:1.55;color:var(--ink-400)}

/* Settings */
.card--narrow{max-width:860px;border-radius:18px;padding:26px}
.chev{color:var(--ink-300);font-size:13px}
.backlink{appearance:none;border:0;background:none;cursor:pointer;font:inherit;
          font-size:12.5px;color:var(--ink-400);padding:0;margin-bottom:18px;
          display:inline-block}
.backlink:hover{color:var(--ink-900)}
.subnav__meta{font-size:11.5px;color:var(--ink-300)}
.avatar--dark{width:40px;height:40px;background:var(--ink-900);color:#fff;font-size:15px}

/* A conversation that is open is work outstanding, not a success state.
   Green belongs on closed. */
.pill.open{background:var(--surface-2,#E9ECEF);color:var(--ink-600)}

/* ---- inbox workspace ----------------------------------------------------
   Three columns in one card: the queue stays visible while you read a thread,
   and who you are talking to stays visible beside it. Swapping the list out
   for the thread meant losing your place on every reply. */
.inbox{display:grid;grid-template-columns:330px minmax(0,1fr) 306px;height:780px;padding:0;
       border-radius:18px;overflow:hidden}
.inbox__list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.inbox__rows{overflow-y:auto;flex:1}
.inbox__thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface-1)}
.inbox__thread--empty{display:grid;place-items:center;color:var(--ink-400)}
.inbox__ctx{border-left:1px solid var(--border);padding:22px 20px;overflow-y:auto;
            display:flex;flex-direction:column;background:var(--paper)}
.inbox__head{display:flex;align-items:center;gap:12px;padding:16px 22px;
             border-bottom:1px solid var(--border);flex-wrap:nowrap;background:var(--paper)}
.inbox__head .name{font-size:15px}
.inbox__head .meta{font-size:12px;color:var(--ink-400);margin-top:2px}
/* Status is a set of three states, not three calls to action. */
.inbox__head .chips{gap:7px}
.inbox__head .btn.sm{font-size:12.5px;padding:8px 15px;box-shadow:none}
.inbox__head .btn.sm:not(.ghost){background:var(--ink-800);border-color:var(--ink-800)}
.inbox__head .btn.sm.ghost{background:var(--paper);color:var(--ink-600);
                           border-color:var(--border-strong)}
.inbox__head .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox__head .chips{flex:0 0 auto;flex-wrap:nowrap}
.inbox__head .orgpick{flex:0 0 auto;max-width:190px;border-radius:999px;padding:8px 12px;
                      font-size:12.5px;background:var(--paper);border-color:var(--border-strong)}
.inbox__head .chips{margin:0}

.cvo{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
     appearance:none;border:0;border-bottom:1px solid var(--surface-3);background:none;
     cursor:pointer;font:inherit;padding:16px 18px}
.cvo:hover{background:var(--surface-1,#FAFAF9)}
.cvo.on{background:var(--surface-2)}
.cvo__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cvo__n{font-size:14px;color:var(--ink-900)}
.cvo__t{font-size:11.5px;color:var(--ink-300);flex:0 0 auto}
.cvo__mid{display:flex;align-items:center;gap:7px;margin:5px 0 6px}
.cvo__ch{font-size:11px;color:var(--ink-300)}
/* The snippet is the only sentence in the row that says what the message is
   about; clipped to one line it was routinely cut mid-clause. */
.cvo__s{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-400)}
.cvo__dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#A2603C;margin-top:7px}

.inbox .thread{flex:1;min-height:0;overflow-y:auto;padding:22px;
               display:flex;flex-direction:column;gap:14px;max-height:none}
.composer{border-top:1px solid var(--border);padding:14px 20px 18px;background:var(--paper)}
.composer .chips{gap:7px;padding:0;margin-bottom:10px}
.composer textarea{width:100%;margin-top:0;border-radius:14px;padding:13px 15px;
                   border:1px solid var(--border);background:var(--surface-1);
                   min-height:64px;line-height:1.55;resize:none}
.composer__go{display:flex;gap:8px;margin-top:10px;align-items:center}
/* Send is one control: the word and the arrow that carries it. */
.btn.composer__send{padding:11px 12px 11px 22px;font-size:13px;gap:12px;box-shadow:none;
                    background:var(--ink-800);border-color:var(--ink-800)}
.composer__send i{width:24px;height:24px;border-radius:50%;background:#fff;
                  color:var(--ink-800);display:grid;place-items:center;
                  font-style:normal;font-size:12px}

/* A content heading, not a navigational caption: the design sets these in
   sentence case, and tracked capitals read as a different kind of thing. */
.ctx__h{font-size:12px;letter-spacing:0;text-transform:none;
        color:var(--ink-400);margin:0 0 10px}
.ctx__sum{font-size:13.5px;line-height:1.55;color:var(--ink-600);margin:0 0 14px}
.ctx__row{display:flex;gap:12px;padding:6px 0;font-size:13.5px}
.ctx__row:first-of-type{border-top:1px solid var(--surface-3);margin-top:10px;padding-top:12px}
.ctx__row .grow{color:var(--ink-300)}
.ctx__row .meta{font-size:13.5px;color:var(--ink-900);text-align:right}
.inbox__ctx .chips{gap:7px}
.inbox__ctx .pill{background:transparent;border:1px solid var(--border);
                  font-size:12.5px;padding:7px 13px;color:var(--ink-600)}
.btn.ctx__go{margin-top:22px;width:100%;padding:11px;font-size:13px;
             border-color:var(--border-strong)}

/* ---- table --------------------------------------------------------------
   Five columns, so the same fact lines up down the page. */
/* The table IS the card: it carried its own border inside the card's, which
   read as a bordered box drawn inside a bordered box. */
.tbl{border:0;border-radius:0;overflow:hidden}
.tbl__h,.tbl__r{display:grid;grid-template-columns:2.4fr 1fr 1.4fr 1.2fr 1fr;
                gap:16px;align-items:center;padding:16px 22px;text-align:left}
.tbl__h{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
        color:var(--ink-300);background:none;padding:14px 22px;
        border-bottom:1px solid var(--border)}
.tbl__r{appearance:none;border:0;border-bottom:1px solid var(--surface-3);background:none;
        cursor:pointer;font:inherit;width:100%}
.tbl__r:hover{background:var(--surface-1,#FAFAF9)}
.tbl__c{display:flex;align-items:center;gap:13px;min-width:0}
.tbl__c .name{display:block;font-size:15px}
.tbl__c .meta{display:block;font-size:12.5px;color:var(--ink-300);overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}
/* Contacts only — Reservations shares .tbl__r and wants its own scale. */
.tbl--contacts .tbl__r > .meta{font-size:13.5px;color:var(--ink-600)}
.tbl--contacts .tbl__r > .meta:last-child{font-size:13px;color:var(--ink-400)}
/* Filter chips sit bare on the canvas above the card, not inside it. */
.chips--filters{gap:8px;padding:0;margin:24px 0 18px}
.chips--filters .btn.sm{font-size:12.5px;padding:9px 16px;box-shadow:none}
.chips--filters .btn.sm:not(.ghost){background:var(--ink-800);border-color:var(--ink-800)}
.chips--filters .btn.sm.ghost{background:var(--paper);color:var(--ink-600);
                              border-color:var(--border-strong)}
.chips--filters .meta{font-size:12.5px;color:var(--ink-300)}

/* ---- stat tiles ---------------------------------------------------------- */
/* The 2px gap over a hairline ground IS the divider — no per-tile border. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
       background:var(--border);border:1px solid var(--border);border-radius:16px;
       overflow:hidden}
.stat{padding:22px;background:var(--paper)}
.stat__l{font-size:12.5px;color:var(--ink-400)}
.stat__v{font-size:34px;font-weight:300;letter-spacing:-.03em;margin-top:12px;line-height:1.1}

@media (max-width:1500px){
  .inbox{grid-template-columns:300px minmax(0,1fr)}
  .inbox__ctx{display:none}
}

/* Counts need air: "Open6" read as one word. */
.nav__n,.subnav__meta{margin-left:8px}

/* ---- month calendar -----------------------------------------------------
   A reservation is a shape in time before it is a row in a list, and you
   cannot see a gap in a list. */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.cal__wd{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
         color:var(--ink-300);text-align:center;padding-bottom:4px}
.cal__d{min-height:86px;border:1px solid var(--border);border-radius:10px;
        padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--paper)}
.cal__d.out{background:transparent;border-color:transparent}
.cal__d.out .cal__n{color:var(--ink-300)}
.cal__n{font-size:12px;color:var(--ink-500)}
.cal__ev{appearance:none;border:1px solid var(--border);border-radius:6px;
         cursor:pointer;font:inherit;font-size:11.5px;padding:4px 6px;text-align:left;
         background:#fff;color:var(--ink-700);
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal__ev.direct{background:var(--surface-2,#E9ECEF);border-color:transparent}
.cal__ev:hover{border-color:var(--ink-400)}

.tbl--res .tbl__h,.tbl--res .tbl__r{grid-template-columns:2fr 1.6fr 1.2fr 1.2fr 1fr}
.tbl .meta.ok{color:#5F7A52}

/* ---- side drawer --------------------------------------------------------
   The record opens beside the list rather than growing the page under it. */
.drawerscrim{position:fixed;inset:0;z-index:70;background:rgba(20,19,17,.36);
             display:flex;justify-content:flex-end}
.drawer{width:420px;max-width:92vw;background:var(--canvas,#FAFAF9);
        border-left:1px solid var(--border);padding:32px 28px;overflow-y:auto;
        display:flex;flex-direction:column;animation:fadein .25s both}
@keyframes fadein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.drawer__x{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:50%;
           appearance:none;border:0;background:var(--surface-2,#F1F0ED);cursor:pointer;
           font-size:18px;color:var(--ink-600)}
.drawer__eyebrow{margin:0;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
                 color:var(--ink-300)}
.drawer__n{margin:8px 0 0;font-size:28px;font-weight:400;letter-spacing:-.02em}
.drawer__sub{margin:6px 0 0;font-size:14px;color:var(--ink-500)}
.drawer__go{margin-top:auto;width:100%}

/* ---- reports ------------------------------------------------------------
   Ask in words; the console matches it to a question it can actually run. */
.askcard{background:var(--ink-800);color:#fff;border-radius:18px;padding:26px 28px;margin-bottom:22px}
.askcard__eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.06em;
                  text-transform:uppercase;color:var(--ink-300)}
.askcard__in{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.24);
             color:#fff;font:inherit;font-size:16px;padding:8px 0;outline:none}
.askcard__in::placeholder{color:rgba(255,255,255,.42)}
.askcard__go{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn.askcard__b{background:#fff;color:var(--ink-800);border-color:#fff;
                padding:13px 24px;font-size:13.5px;box-shadow:none}
.btn.askcard__b:disabled{opacity:.45}
.askcard__s{background:transparent;color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.24)}
.askcard__s:hover{border-color:rgba(255,255,255,.5)}

/* A content section label, as the design writes them: sentence case at
   12.5px in the muted ink. The tracked uppercase treatment belongs to the
   navigational captions (PROPERTIES, TICKETS), not to these. */
.seclabel{margin:0 0 14px;font-size:12.5px;font-weight:400;color:var(--ink-400);
          text-transform:none;letter-spacing:0}
/* A settings sub-page heading is body ink at 14px — it names a record, where
   `.seclabel` labels a block of content. */
.seclabel--h{font-size:14px;color:var(--ink-900);margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);
       border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:26px}
.tile{background:var(--paper);padding:22px}
.tile__l{font-size:12.5px;color:var(--ink-400)}
.tile__v{font-size:38px;font-weight:300;letter-spacing:-.03em;line-height:1;margin-top:12px}
.tile__u{font-size:14px;color:var(--ink-300);margin-left:6px}
.tile__d{font-size:12px;color:var(--ink-400);margin-top:10px}

.fbwrap{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.fb{margin-bottom:10px}
.fb__who{display:flex;align-items:center;gap:12px}
.fb__who .name{font-size:15px}
.fb .chips{gap:6px}
.fb .pill{font-size:11.5px;color:var(--ink-600);padding:4px 11px}
.fb__stars{display:block;color:#A2603C;letter-spacing:.12em;font-size:13px}
.fb__q{margin:14px 0;font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--ink-600)}
.sent{position:sticky;top:120px}
.sent__bar{display:flex;height:10px;border-radius:999px;overflow:hidden;margin-bottom:14px}
.sent__seg--positive{background:#A2603C}
.sent__seg--neutral{background:#D8D5CF}
.sent__seg--negative{background:#7A6A5E}
.sent__row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.sent__dot{width:8px;height:8px;border-radius:50%}
.sent__dot--positive{background:#A2603C}
.sent__dot--neutral{background:#D8D5CF}
.sent__dot--negative{background:#7A6A5E}
.sent__pct{font-size:16px;font-weight:300}

/* ---- survey workspace ---------------------------------------------------- */
.svy{display:grid;grid-template-columns:290px minmax(0,1fr) 300px;min-height:700px;padding:0;overflow:hidden}
.svy__list{border-right:1px solid var(--border);padding:18px 16px;
           display:flex;flex-direction:column;gap:8px}
.svy__cap{font-size:12.5px;color:var(--ink-400);padding:0 6px 12px;margin:0}
.svy__i{display:block;width:100%;text-align:left;appearance:none;
        border:1px solid var(--border);background:var(--paper);cursor:pointer;
        font:inherit;padding:15px 16px;border-radius:14px}
.svy__i .name{display:block;font-size:14.5px}
.svy__i:hover{background:var(--surface-1,#FAFAF9)}
.svy__i.on{background:var(--surface-2,#F1F0ED);border-color:var(--ink-900)}
.svy__i .meta{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-400)}
.svy__canvas{padding:0;overflow-y:auto;background:var(--surface-1)}
/* A centred reading measure: the questions are a document, not a table. */
.svy__qs{padding:24px 26px;display:flex;flex-direction:column;gap:12px;
         max-width:620px;margin:0 auto}
.svy__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
           background:var(--paper);padding:18px 26px;border-bottom:1px solid var(--border)}
.svy__head .meta{font-size:12px;color:var(--ink-300)}
.svy__head .btn.sm{padding:11px 22px;background:var(--ink-800);border-color:var(--ink-800);
                   box-shadow:none}
.svy__rail{border-left:1px solid var(--border);padding:18px}
.qc{border:1px solid var(--border);border-radius:16px;padding:20px 22px;
    background:var(--paper)}
.qc .chips{gap:7px;padding:0;margin-top:16px}
/* The answer type is a label on the question, not a tag on a person. */
.pill--type{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
            color:var(--ink-400);background:var(--surface-2);padding:4px 12px}
.qc__top{display:flex;align-items:center;gap:10px}
.qc__n{font-size:12px;color:var(--ink-300)}
.qc__q{margin:12px 0;font-size:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.rail__r{font-size:13px;color:var(--ink-600);padding:8px 0;border-top:1px solid var(--border)}
.insight{margin-top:22px;background:var(--ink-800);color:#fff;border-radius:16px;padding:20px}
.insight__v{font-size:34px;font-weight:300;letter-spacing:-.03em;line-height:1}
.insight__l{font-size:13px;color:var(--ink-200);margin-top:10px;line-height:1.5}

@media (max-width:1500px){
  .svy{grid-template-columns:250px minmax(0,1fr)}
  .svy__rail{display:none}
  .fbwrap{grid-template-columns:1fr}
}

/* ---- settings field rows ------------------------------------------------
   A label column and the value on a rule: a settings page reads as a record,
   not as a form waiting to be filled in. */
.frow{display:flex;align-items:baseline;gap:28px;padding:20px 0;
      border-bottom:1px solid var(--border)}
.frow--tall{align-items:flex-start}
.frow--desc{display:flex;align-items:center;gap:18px;padding:14px 0;
            border-bottom:1px solid var(--border)}
.frow__l{flex:0 0 180px;font-size:14px;color:var(--ink-900)}
.frow__l .name{font-size:14px}
.frow__i{flex:1;min-width:0;border:0;border-bottom:1px solid var(--border-strong);
         background:transparent;font:inherit;font-size:15px;padding:8px 0;outline:none;
         color:var(--ink-900)}
.frow__i:focus{border-color:var(--ink-900)}
.drop--logo{max-width:220px;height:110px}

/* Knowledge-base and saved-reply entries as cards. */
.kb{background:var(--surface-1,#FAFAF9);border:1px solid var(--border);
    border-radius:14px;padding:16px;margin-top:10px}
.kb__top{display:flex;align-items:baseline;gap:12px}
.kb__q{flex:1;font-size:15px}
.kb__a{margin:7px 0 0;font-size:13.5px;color:var(--ink-400);line-height:1.55}
.kb__top .meta{font-size:11.5px;color:var(--ink-300)}
/* The one way to add an approved answer, so it carries an ink edge. */
.btn.ghost.kbadd{border-color:var(--ink-900);color:var(--ink-900);
                 background:var(--paper);padding:11px 20px;font-size:12.5px}
.kb--new{background:var(--paper)}

/* Sub-nav rows carry the same icons as the nav they hang from. */
.subnav__item--ic{display:flex;align-items:center;gap:10px}
.subnav__item--ic .nav__ic{width:15px;height:15px}
.subnav__item--ic .nav__ic svg{width:15px;height:15px}
.subnav__item.on{background:#F6EEE8;color:#1E1D1B}
.subnav__item.on .nav__ic{color:#A2603C}

/* The rail runs the height of the window so the user block sits at its foot. */
.side{display:flex;flex-direction:column;min-height:calc(100vh - 104px)}
.side-foot{margin-top:auto;padding:16px 0 0;border-top:1px solid var(--border)}

/* Page titles match the design's weight and size. */
.head h1{font-size:32px;font-weight:400;letter-spacing:-.03em;line-height:1.08}

/* Grouped search results. */
.palette__g{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
            color:var(--ink-300);padding:12px 20px 6px}

/* Dossier header and underlined tabs. */
.doshead{display:flex;align-items:flex-start;gap:20px;margin-bottom:6px}
.doshead .chips{padding:0}
.dossum{font-size:15px;line-height:1.6;color:var(--ink-600);margin-top:14px;max-width:70ch}
/* The dossier's tag chips carry the artboard's edge and size; the shared
   `.pill` is left alone because twenty other places use it. */
.pill--tag{font-size:12px;padding:6px 13px;border:1px solid var(--border)}
/* A key/value row: the value is the fact, so the key is the quiet half. */
.kvrow{padding:7px 0;border-top:0}
.kvrow .name{font-size:14px;color:var(--ink-300)}
.kvrow > .meta{font-size:14px;color:var(--ink-900)}
.kvrow--pref{padding:18px 0;border-top:0;border-bottom:1px solid var(--surface-3)}
.kvrow--pref .name{font-size:15px;color:var(--ink-400)}
.kvrow--pref > .meta{font-size:15px;color:var(--ink-900)}
.avatar--lg{width:56px;height:56px;font-size:20px}
.utabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin:26px 0 18px}
.utab{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:14px;
      color:var(--ink-400);padding:0 0 12px;border-bottom:2px solid transparent;
      margin-bottom:-1px}
.utab{font-size:13.5px}
.utab:hover{color:var(--ink-700)}
.utab.on{color:var(--ink-900);border-bottom-color:var(--ink-900)}

/* Settings hub rows read as a list of destinations. */
.card--narrow .row{padding:20px 0;margin:0;border-top:0;
                   border-bottom:1px solid var(--surface-3);border-radius:0}
.card--narrow .row .name{font-size:14.5px}
.card--narrow .row .meta{margin-top:3px}
/* An invoice is four facts that line up down the page, not a flex row that
   lets each one land wherever its text ends. */
.invrow{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:16px;align-items:baseline;
        padding:18px 0;border-bottom:1px solid var(--surface-3)}
.invrow__p{font-size:14px}
.invrow__d{font-size:13px;color:var(--ink-400)}
.invrow__a{font-size:14px;text-align:right}
.invrow__s{font-size:12.5px;color:var(--success-600);text-align:right}

/* Saved reports as cards on the overview, where they are actually looked for. */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sechead .meta{font-size:12.5px;color:var(--ink-300)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;
       margin-bottom:26px}
.rcard{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;font:inherit;
       background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.rcard:hover{border-color:var(--border-strong)}
.rcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rcard__t{font-size:15px}
.rcard__m{display:block;font-size:12.5px;color:var(--ink-300);margin-top:8px}

.proppill__h{font-size:12px;color:var(--ink-300)}
.propmenu__i--all{background:var(--surface-2);border:0;color:var(--ink-600)}

/* A segmented track. Two views of one screen, so the active tab is an
   accent tint rather than the dark fill that reads as an action. */
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--border);
     border-radius:999px;padding:4px;margin-bottom:18px}
.seg__b{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
        font-size:13.5px;color:var(--ink-400);padding:10px 24px;border-radius:999px}
.seg__b.on{background:#F6EEE8;color:var(--ink-900)}

/* Ask-and-build: the field and its button belong on one line. */
.askcard__row{display:flex;gap:10px;align-items:center;margin-top:16px}
.askcard__in{flex:1;min-width:0;padding:14px 18px;border-radius:12px;
             background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
             color:#fff;font:inherit;font-size:14px}
.askcard__in::placeholder{color:rgba(255,255,255,.5)}
.askcard__go{margin-top:14px}
.askcard__go .chips{gap:8px;padding:0}
.rcard__a{display:flex;gap:8px;margin-top:14px}

/* Survey rail: each rule is a thing, so each gets an edge and a sentence
   saying what it actually does. */
.rail__c{background:var(--surface-1,#FAFAF9);border:1px solid #EDECE9;border-radius:14px;
         padding:16px;margin-bottom:10px}
.rail__b{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.rail__t{font-size:13.5px;color:var(--ink-900)}
.rail__s{font-size:12.5px;color:var(--ink-400);margin-top:5px;line-height:1.45}

/* Activity reads as a spine: the dates line up in their own gutter. */
.tl{display:flex;gap:16px;padding-bottom:20px}
.tl__when{width:92px;flex:none;font-size:12px;color:var(--ink-300,#A9A7A1)}
.tl__t{font-size:15px}
.tl__s{font-size:13px;color:var(--ink-400);margin-top:3px;line-height:1.5}

.frow__ta{resize:vertical;font-family:inherit;border:1px solid var(--border);
          border-radius:14px;background:var(--surface-1);padding:14px 16px;
          font-size:14.5px;line-height:1.55;min-height:84px}

/* `.btn.ghost` is two classes and was winning the cascade, so the suggestion
   chips were rendering dark-on-dark inside the black card. */
.askcard .btn.ghost.askcard__s{color:#EDECE9;border-color:rgba(255,255,255,.16);
                               background:rgba(255,255,255,.08);font-size:12.5px}
.askcard .btn.ghost.askcard__s:hover{border-color:rgba(255,255,255,.6);color:#fff}

/* Settings hub: full-bleed rows that respond to the pointer. A row that is
   clickable everywhere but lights up nowhere gives no feedback. */
.card--flush{padding:0;overflow:hidden;border-radius:18px}
.hubrow{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
        appearance:none;border:0;background:none;cursor:pointer;font:inherit;
        padding:20px 24px;transition:background .16s}
.hubrow + .hubrow{border-top:1px solid var(--border)}
.hubrow:hover{background:var(--surface-1,#FAFAF9)}
.hubrow .name{font-size:15.5px}
.hubrow .meta{font-size:13px;margin-top:3px}
.hubrow > .meta{color:var(--ink-300);margin-top:0}
.kb__scope{margin:10px 0 0;font-size:12.5px;color:var(--ink-400);line-height:1.45}

/* Classes the markup gained in this pass, kept together so the rules that
   depend on source order sit at the end where they win. */
.inbox__nm{display:flex;align-items:center;gap:9px}
.avatar--hd{width:38px;height:38px;font-size:14px}
.svy__i .svy__st{display:flex;gap:8px;font-size:11.5px;color:var(--ink-300);margin-top:6px}
/* A heading that labels a card's contents, where `.card h3` would otherwise
   win on both size and margin. */
.card h3.seclabel{font-size:12.5px;margin:0 0 14px;color:var(--ink-400)}
/* A field with no label column: the heading above it already says what it is. */
.frow--bare{gap:0}
.frow--bare .frow__i{flex:1}
.card--flush .empty{padding:30px 22px}

/* A nav item that carries a sub-nav is a disclosure as well as a destination.
   The chevron gets a gutter of its own, absolutely placed, so the count badge
   keeps the same right edge on every row — group or not. */
.nav{position:relative;padding-right:34px}
.nav__x{position:absolute;right:13px;top:50%;transform:translateY(-50%);
        font-size:15px;line-height:1;color:var(--ink-300);
        transition:transform .16s ease}
.nav__x.open{transform:translateY(-50%) rotate(90deg)}
.nav.active .nav__x{color:var(--ink-600)}

/* ---- survey question editing --------------------------------------------
   The card is the editor. Fields look like the text they replace until you
   reach for them, so the card still reads as a question rather than a form. */
.qc__q--edit{display:block;width:100%;appearance:none;background:none;border:0;
             border-bottom:1px solid transparent;border-radius:0;padding:2px 0;
             font:inherit;font-size:16px;color:var(--ink-900)}
.qc__q--edit:hover{border-bottom-color:var(--border)}
.qc__q--edit:focus{outline:none;border-bottom-color:var(--ink-900);background:none}
.qc__opts{margin-top:12px}
.pill--opt{display:inline-flex;align-items:center;gap:7px}
.pill__x{appearance:none;border:0;background:none;cursor:pointer;font:inherit;
         font-size:13px;line-height:1;color:var(--ink-400);padding:0}
.pill__x:hover{color:var(--ink-900)}
.qc__add{display:flex;gap:8px;align-items:center;margin-top:10px}
.qc__addin{flex:1;min-width:0;height:36px;padding:0 12px;font:inherit;font-size:13.5px;
           background:var(--paper);border:1px solid var(--border);border-radius:10px;
           color:var(--ink-900)}
.qc__addin:focus{outline:none;border-color:var(--border-strong)}

/* ---- outbound calendar feed ---------------------------------------------
   The one URL an operator has to carry to another platform, so it is a
   thing on the page rather than a line of small print. */
.icalx{display:flex;align-items:flex-start;gap:16px;margin:12px 0 4px;padding:16px 18px;
       background:var(--surface-1);border:1px solid var(--border);border-radius:14px}
.icalx__t{margin:0;font-size:14px;color:var(--ink-900)}
.icalx__d{margin:4px 0 0;font-size:12.5px;color:var(--ink-400);line-height:1.5}
.icalx__u{display:block;margin-top:10px;font-size:12px;color:var(--ink-600);
          user-select:all;word-break:break-all}

/* ---- reservation drawer: edit and cancel -------------------------------- */
.drawer__edit{margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.drawer__danger{display:flex;align-items:flex-start;gap:14px;margin-top:18px;
                padding:14px 16px;border:1px solid var(--border);border-radius:12px}
.drawer__danger .name{margin:0;font-size:14px}
.drawer__danger .meta{margin:4px 0 0;font-size:12.5px;line-height:1.45}

/* Each question in the portal builder is a row plus, for the select types,
   the answers it offers. */
.qrow{padding:2px 0 4px}
.qrow + .qrow{border-top:1px solid var(--border)}
.qrow .qc__opts{margin:2px 0 12px}

/* Settings hub: one box per category, so nine rows read as three short lists. */
.sethub + .sethub{margin-top:26px}
.sethub .seclabel{margin:0 0 10px}