/* Domus Hub. Shared tokens with domus-inbox (DESIGN.md): ink, paper, stone, zellige, brass, brick; Hanken Grotesk for
   the UI, Cormorant Garamond only for door names, the greeting and sign-in titles. The arch is the one bold element. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#1F3044; --paper:#F7F8F6; --surface:#FFFFFF; --stone:#E3E7E4; --zellige:#1E6B5A; --zellige-ink:#FFFFFF;
  --zellige-soft:#E2EFEA; --brass:#B08D57; --brick:#B5452F; --brick-soft:#F8E7E2; --muted:#5B6B7C; --bar:#1F3044;
  --bar-ink:#F7F8F6; --sheet-shadow:0 12px 32px rgba(15,25,35,.18); --scrim:rgba(18,28,39,.42);
  --gut:16px; --tb:56px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sl:max(var(--gut),env(safe-area-inset-left)); --sr:max(var(--gut),env(safe-area-inset-right));
  --ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serif:'Cormorant Garamond',Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#E8ECEA; --paper:#121C27; --surface:#1A2633; --stone:#2A3846; --zellige:#5FB39C; --zellige-ink:#0E1A22;
  --zellige-soft:#1F3A35; --brass:#D2AE73; --brick:#E07A62; --brick-soft:#3A2420; --muted:#9AA8B5; --bar:#0E1620;
  --bar-ink:#E8ECEA; --sheet-shadow:0 12px 32px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.55); color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;min-height:100vh;min-height:100dvh}
@supports(overflow:clip){body{overflow-x:clip}}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--zellige)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;display:block}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2{font-weight:600;overflow-wrap:anywhere}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;
  background:var(--zellige);color:var(--zellige-ink);font-weight:600;text-decoration:none;max-width:100%;overflow-wrap:anywhere;text-align:center}
.btn:disabled{opacity:.5;cursor:default}
.btn-q{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;
  border:1px solid var(--stone);background:var(--surface);color:var(--ink);font-weight:500;max-width:100%;overflow-wrap:anywhere;text-align:center}
.btn-q.warn{color:var(--brick)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;color:inherit}
.pill{display:inline-flex;align-items:center;font-size:13px;line-height:22px;padding:0 9px;border-radius:11px;border:1px solid var(--stone);
  color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill.user{color:var(--ink)}
.pill.admin{color:var(--zellige);border-color:var(--zellige)}
.pill.owner{color:var(--brass);border-color:var(--brass)}
.pill.off{color:var(--brick);border-color:var(--brick)}
.pill.none{border-color:transparent;color:var(--muted);padding:0}
.dot{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--brass);color:#fff;font-size:13px;font-weight:600}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:0;width:100%;text-align:left;overflow-wrap:anywhere}
label.f input,label.f select{width:100%;min-width:0;min-height:44px;border:1px solid var(--stone);border-radius:10px;padding:0 12px;
  background:var(--surface);color:var(--ink);font-size:16px}
label.f input:disabled{color:var(--muted)}
.hint{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.msg{font-size:13px;color:var(--brick);background:var(--brick-soft);border-radius:10px;padding:8px 12px;width:100%;overflow-wrap:anywhere}

/* shell: top bar on phone and tablet, left rail from 1024 px */
.shell{display:flex;min-height:100vh;min-height:100dvh}
.col{flex:1;min-width:0;display:flex;flex-direction:column}
.tb{height:calc(var(--tb) + var(--sat));position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:var(--sat) var(--sr) 0 var(--sl);background:var(--bar);color:var(--bar-ink)}
.mark{width:32px;height:32px;flex:none;padding:3px;border-radius:8px;background:#F7F8F6}
.tb-title{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-sp{flex:1}
.lang{flex:none;min-height:44px;min-width:64px;-webkit-appearance:none;appearance:none;text-align:center;border:1px solid rgba(247,248,246,.35);
  border-radius:10px;background:transparent;color:inherit;padding:0 10px;font-size:15px}
.lang option{color:#1F3044;background:#fff}
.rail{display:none}
.main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px var(--sr) calc(24px + var(--sab)) var(--sl)}
body.has-tabs .main{padding-bottom:calc(88px + var(--sab))}
.view{display:flex;flex-direction:column;gap:16px;min-width:0}
.head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.head h1{flex:1;min-width:0;font-size:24px}
.greet{font-family:var(--serif);font-size:32px;line-height:1.1;font-weight:600}
.sub{color:var(--muted);font-size:15px;overflow-wrap:anywhere}

/* bottom tabs (owner, phone and tablet) */
.btabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--surface);border-top:1px solid var(--stone);
  padding:0 env(safe-area-inset-right) var(--sab) env(safe-area-inset-left)}
.btab{flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;color:var(--muted)}
.btab.on{color:var(--zellige);font-weight:600}
.btab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}

/* doors */
.doors{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.door{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-height:208px;height:100%;
  padding:44px 14px 16px;border:1px solid var(--stone);border-radius:999px 999px 14px 14px;background:var(--surface);
  color:var(--ink);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.door:hover{border-color:var(--zellige)}
.door-name{font-family:var(--serif);font-size:24px;line-height:1.1;font-weight:600}
.door-desc{font-size:13px;color:var(--muted)}
.door-meta{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0;max-width:100%}
.door .dot{position:absolute;top:14px;left:50%;transform:translateX(-50%)}
.foot-links{display:flex;gap:8px;flex-wrap:wrap}

/* people */
.ptable{display:flex;flex-direction:column;border:1px solid var(--stone);border-radius:14px;background:var(--surface);overflow:hidden}
.prow{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;padding:12px 14px;border-bottom:1px solid var(--stone);min-width:0;min-height:56px}
.prow:last-child{border-bottom:0}
button.prow:hover{background:var(--zellige-soft)}
.prow.phead{display:none}
.pr-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pr-name{font-weight:600;overflow-wrap:anywhere;min-width:0}
.pr-mail{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.pr-apps{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.cell{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.cell-app{font-size:13px;color:var(--muted)}
.cell.none{display:none}

/* activity and lists */
.tl{list-style:none;display:flex;flex-direction:column;border:1px solid var(--stone);border-radius:14px;background:var(--surface);overflow:hidden}
.tl li{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-bottom:1px solid var(--stone);min-width:0}
.tl li:last-child{border-bottom:0}
.tl-top{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);min-width:0}
.tl-top span{overflow-wrap:anywhere;min-width:0}
.tl-what{overflow-wrap:anywhere}
.tl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl-row .grow{flex:1;min-width:0}
.empty{padding:16px;border:1px dashed var(--stone);border-radius:14px;color:var(--muted);overflow-wrap:anywhere}

/* drawer (person) and sheets */
.scrim{position:fixed;inset:0;z-index:20;background:var(--scrim)}
.drawer{position:fixed;z-index:21;inset:0;background:var(--paper);display:flex;flex-direction:column;box-shadow:var(--sheet-shadow);
  padding-top:var(--sat)}
.dr-head{display:flex;align-items:center;gap:8px;padding:8px var(--sr) 8px var(--sl);border-bottom:1px solid var(--stone);min-width:0}
.dr-head h2{flex:1;min-width:0;font-size:20px}
.dr-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px var(--sr) calc(24px + var(--sab)) var(--sl);display:flex;flex-direction:column;gap:18px}
.facts{display:flex;flex-direction:column;gap:4px;min-width:0}
.facts span{overflow-wrap:anywhere}
.facts .muted{color:var(--muted);font-size:13px}
.grant{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--stone)}
.grant h3{font-size:15px;font-weight:600}
.seg{display:flex;border:1px solid var(--stone);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{flex:1;min-width:0;min-height:44px;padding:0 8px;font-size:15px;border-right:1px solid var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button[aria-checked=true]{background:var(--zellige);color:var(--zellige-ink);font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--stone);background:var(--surface);font-size:15px;max-width:100%;overflow-wrap:anywhere}
.chip[aria-checked=true]{border-color:var(--zellige);color:var(--zellige);background:var(--zellige-soft);font-weight:600}
.sheet{position:fixed;inset:0;z-index:22;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding-top:var(--sat)}
.sheet-in{background:var(--paper);width:100%;max-width:520px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;border-radius:16px 16px 0 0;
  box-shadow:var(--sheet-shadow);padding:18px var(--sr) calc(16px + var(--sab)) var(--sl);display:flex;flex-direction:column;gap:12px}
.sheet-in h2{font-size:20px}
.stack{display:flex;flex-direction:column;gap:12px;width:100%}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn{flex:1}
.code-big{font-size:28px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;text-align:center}
.link-out{font-size:13px;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--stone);border-radius:10px;padding:10px 12px;user-select:all}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--sab));z-index:30;max-width:calc(100% - 32px);
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:15px;overflow-wrap:anywhere}
body.has-tabs .toast{bottom:calc(72px + var(--sab))}
.toast.err{background:var(--brick);color:#fff}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet:not([hidden]) .sheet-in{animation:rise .18s ease-out}
.drawer:not([hidden]){animation:slide .18s ease-out}
.scrim:not([hidden]),.sheet:not([hidden]){animation:fade .18s ease-out}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* sign-in: the card is a door */
body.plain{display:flex;align-items:center;justify-content:center;
  padding:calc(var(--gut) + var(--sat)) var(--sr) calc(var(--gut) + var(--sab)) var(--sl)}
.card{background:var(--surface);border:1px solid var(--stone);border-radius:999px 999px 14px 14px;padding:56px 24px 24px;max-width:420px;
  width:100%;min-width:0;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;overflow-wrap:anywhere}
.card h1{font-family:var(--serif);font-size:32px;line-height:1.1}
.card .mark{width:44px;height:44px;padding:4px}
.card form{width:100%}
.card .btn,.card .btn-q,.card .btn-s{width:100%}
.btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--stone);background:var(--surface);color:var(--ink);font-weight:500}
.lead{color:var(--muted);font-size:15px}
#code{letter-spacing:.3em;text-align:center;font-size:24px;font-variant-numeric:tabular-nums}
.msg.ok{color:var(--zellige);background:var(--zellige-soft)}
.alt{width:100%;text-align:left}
.alt summary{min-height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;cursor:pointer;list-style:none}
.alt summary::-webkit-details-marker{display:none}
.alt input{width:100%;min-height:44px;border:1px solid var(--stone);border-radius:10px;padding:0 12px;background:var(--surface);font-size:16px}
.lang-f{max-width:220px}

@media (min-width:640px){
  :root{--gut:24px}
  .doors{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .sheet{align-items:center}
  .sheet-in{border-radius:16px;max-height:calc(100% - 48px)}
}
@media (min-width:1024px){
  :root{--gut:32px}
  .tb{display:none}
  #phone-links{display:none}
  .btabs{display:none}
  body.has-tabs .main{padding-bottom:32px}
  body.has-tabs .toast{bottom:24px}
  .rail{display:flex;flex-direction:column;gap:6px;width:248px;flex:none;position:sticky;top:0;height:100vh;height:100dvh;
    padding:calc(20px + var(--sat)) 14px 16px;background:var(--surface);border-right:1px solid var(--stone)}
  .rail-brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;min-width:0}
  .rail-brand span{font-size:17px;font-weight:600}
  .rail-nav{display:flex;flex-direction:column;gap:2px}
  .rnav{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:10px;color:var(--muted);text-align:left;font-weight:500}
  .rnav:hover{background:var(--paper);color:var(--ink)}
  .rnav.on{background:var(--zellige-soft);color:var(--zellige);font-weight:600}
  .rail-sp{flex:1}
  .rail-foot{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--stone);padding-top:12px}
  .me{display:flex;align-items:center;gap:10px;min-width:0;padding:0 4px}
  .avatar{flex:none;width:36px;height:36px;border-radius:50%;background:var(--zellige-soft);color:var(--zellige);display:flex;align-items:center;justify-content:center;font-weight:600}
  .me-name{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail .lang{border-color:var(--stone);color:var(--ink);text-align:left;width:100%}
  .main{padding-top:32px}
  .greet{font-size:40px}
  .prow.phead{display:grid;font-size:13px;color:var(--muted);background:var(--paper)}
  .prow{display:grid;grid-template-columns:minmax(220px,2.2fr) repeat(5,minmax(84px,1fr));align-items:center;gap:12px;padding:10px 16px}
  .pr-apps{display:contents}
  .cell,.cell.none{display:flex}
  .cell-app{display:none}
  .phead span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .drawer{inset:0 0 0 auto;width:480px;border-left:1px solid var(--stone)}
}