:root {
    --ground:#FBF7F0; --surface:#FFFFFF; --surface-2:#F4EDE1;
    --ink:#2C1A16; --ink-2:#5D423A; --ink-3:#8E7466;
    --line:#E6DACA; --line-soft:#F0E8DC;
    --accent:#8A6A20; --accent-soft:#F7EDD6; --on-accent:#FFFCF4;
    --now:#8E2420;
    --shadow:0 1px 2px rgba(44,26,22,.06),0 8px 24px -14px rgba(44,26,22,.28);
    --shadow-lift:0 2px 6px rgba(44,26,22,.10),0 18px 40px -18px rgba(44,26,22,.40);
    --c1-bg:#F7E7E5; --c1-fg:#7E2A26; --c1-ln:#EBC9C5;
    --c2-bg:#F8EED6; --c2-fg:#7A5C13; --c2-ln:#EBD9AE;
    --c3-bg:#E4EEE3; --c3-fg:#2C5B36; --c3-ln:#C4DCC3;
    --c4-bg:#E3EBF3; --c4-fg:#274A6B; --c4-ln:#C3D5E6;
    --c5-bg:#F0E6F0; --c5-fg:#5C2E5C; --c5-ln:#DCC8DC;
    --c6-bg:#FAE9DE; --c6-fg:#8A4A22; --c6-ln:#EFD2BC;
    --c7-bg:#DEEAEA; --c7-fg:#17595A; --c7-ln:#BCD4D4;
    --c8-bg:#F7E4EB; --c8-fg:#8C2F55; --c8-ln:#E9C3D2;
    --c9-bg:#EDEFDC; --c9-fg:#55621F; --c9-ln:#D7DCBA;
    --c10-bg:#E4E4F2; --c10-fg:#3B3A78; --c10-ln:#C6C5DF;
    --c11-bg:#EEE6E0; --c11-fg:#5A4032; --c11-ln:#D9C9BD;
    --c12-bg:#E5E9EC; --c12-fg:#45525C; --c12-ln:#C7CFD5;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:#17100E; --surface:#231715; --surface-2:#2F1E1B;
      --ink:#F3E6CE; --ink-2:#C8AC86; --ink-3:#96795F;
      --line:#3E2721; --line-soft:#31201C;
      --accent:#D9B76A; --accent-soft:#3A2A14; --on-accent:#1E1310;
      --now:#E2796E;
      --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -16px rgba(0,0,0,.85);
      --shadow-lift:0 2px 8px rgba(0,0,0,.55),0 20px 44px -20px rgba(0,0,0,.95);
      --c1-bg:#3B1B18; --c1-fg:#EFA79E; --c1-ln:#5A2A25;
      --c2-bg:#3A2E12; --c2-fg:#E4C67E; --c2-ln:#56441F;
      --c3-bg:#1B3021; --c3-fg:#91C79D; --c3-ln:#2B4A33;
      --c4-bg:#16293C; --c4-fg:#93BBDE; --c4-ln:#22405C;
      --c5-bg:#332033; --c5-fg:#D0A6D0; --c5-ln:#4B324B;
      --c6-bg:#3B2415; --c6-fg:#E0A473; --c6-ln:#563722;
      --c7-bg:#12312F; --c7-fg:#7FC5C2; --c7-ln:#1E4746;
      --c8-bg:#3A1B27; --c8-fg:#EC9DB6; --c8-ln:#55293A;
      --c9-bg:#2C3113; --c9-fg:#C2CE7E; --c9-ln:#424A1F;
      --c10-bg:#1E1E3C; --c10-fg:#A6A5E0; --c10-ln:#2E2D57;
      --c11-bg:#2E241D; --c11-fg:#C9AA93; --c11-ln:#46372C;
      --c12-bg:#22282D; --c12-fg:#A8B6C0; --c12-ln:#333C44;
    }
  }
  :root[data-theme="dark"] {
    --ground:#17100E; --surface:#231715; --surface-2:#2F1E1B;
    --ink:#F3E6CE; --ink-2:#C8AC86; --ink-3:#96795F;
    --line:#3E2721; --line-soft:#31201C;
    --accent:#D9B76A; --accent-soft:#3A2A14; --on-accent:#1E1310;
    --now:#E2796E;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -16px rgba(0,0,0,.85);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55),0 20px 44px -20px rgba(0,0,0,.95);
    --c1-bg:#3B1B18; --c1-fg:#EFA79E; --c1-ln:#5A2A25;
    --c2-bg:#3A2E12; --c2-fg:#E4C67E; --c2-ln:#56441F;
    --c3-bg:#1B3021; --c3-fg:#91C79D; --c3-ln:#2B4A33;
    --c4-bg:#16293C; --c4-fg:#93BBDE; --c4-ln:#22405C;
    --c5-bg:#332033; --c5-fg:#D0A6D0; --c5-ln:#4B324B;
    --c6-bg:#3B2415; --c6-fg:#E0A473; --c6-ln:#563722;
    --c7-bg:#12312F; --c7-fg:#7FC5C2; --c7-ln:#1E4746;
    --c8-bg:#3A1B27; --c8-fg:#EC9DB6; --c8-ln:#55293A;
    --c9-bg:#2C3113; --c9-fg:#C2CE7E; --c9-ln:#424A1F;
    --c10-bg:#1E1E3C; --c10-fg:#A6A5E0; --c10-ln:#2E2D57;
    --c11-bg:#2E241D; --c11-fg:#C9AA93; --c11-ln:#46372C;
    --c12-bg:#22282D; --c12-fg:#A8B6C0; --c12-ln:#333C44;
  }

  * { box-sizing:border-box; }
  body {
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
    height:100vh; overflow:hidden;
  }
  button,input,select,textarea { font:inherit; color:inherit; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

  .app { display:grid; grid-template-columns:248px 1fr; height:100vh; }

  /* sidebar */
  .side { background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:22px; padding:18px 16px; overflow-y:auto; }
  .brand { display:flex; align-items:center; gap:9px; }
  .brand { padding-bottom:2px; }
  .brand .mark { width:34px; height:34px; flex:none; border-radius:50%; display:block; box-shadow:0 0 0 1px var(--line), 0 2px 8px -3px rgba(44,26,22,.5); }
  .brand .name { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:16px; letter-spacing:-.01em; line-height:1.15; }
  .brand .sub { font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
  .create { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:10px 14px; border:0; border-radius:9px; background:var(--accent); color:var(--on-accent); font-weight:500; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s,filter .12s; }
  .create:hover { filter:brightness(1.08); transform:translateY(-1px); }
  .create .plus { font-size:17px; line-height:1; margin-top:-2px; }

  .mini-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .mini-title { font-family:"Fraunces",Georgia,serif; font-size:15px; font-weight:600; }
  .mini-nav { display:flex; gap:2px; }
  .icon-btn { width:24px; height:24px; display:grid; place-items:center; border:0; background:none; border-radius:6px; color:var(--ink-3); cursor:pointer; transition:background .12s,color .12s; }
  .icon-btn:hover { background:var(--surface-2); color:var(--ink); }
  .icon-btn svg { width:14px; height:14px; }
  .mini-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
  .mini-dow { font-family:"IBM Plex Mono",monospace; font-size:10px; color:var(--ink-3); text-align:center; padding:3px 0 5px; }
  .mini-day { position:relative; aspect-ratio:1; display:grid; place-items:center; border:0; background:none; border-radius:50%; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2); cursor:pointer; font-variant-numeric:tabular-nums; }
  .mini-day:hover { background:var(--surface-2); }
  .mini-day.out { color:var(--ink-3); opacity:.45; }
  .mini-day.in-week { background:var(--accent-soft); border-radius:0; }
  .mini-day.week-start { border-radius:50% 0 0 50%; }
  .mini-day.week-end { border-radius:0 50% 50% 0; }
  .mini-day.today { color:var(--now); font-weight:500; }
  .mini-day.today::after { content:""; position:absolute; transform:translateY(11px); width:3px; height:3px; border-radius:50%; background:var(--now); }

  .sec-label { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
  .cal-list { display:flex; flex-direction:column; gap:1px; }
  .cal-row { display:flex; align-items:center; gap:9px; padding:6px 7px; border-radius:7px; cursor:pointer; border:0; background:none; text-align:left; width:100%; }
  .cal-row:hover { background:var(--surface-2); }
  .swatch { width:13px; height:13px; flex:none; border-radius:4px; border:1.5px solid transparent; }
  .cal-row[aria-pressed="false"] .swatch { background:transparent !important; }
  .cal-row[aria-pressed="false"] .cal-name { color:var(--ink-3); }
  .cal-name { font-size:13px; color:var(--ink-2); }
  .cal-count { margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

  /* main */
  .main { display:flex; flex-direction:column; min-width:0; }
  .topbar { display:flex; align-items:center; gap:14px; padding:16px 20px 14px; border-bottom:1px solid var(--line); background:var(--surface); flex:none; }
  .month-title { font-family:"Fraunces",Georgia,serif; font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0; white-space:nowrap; }
  .month-title .yr { color:var(--ink-3); font-weight:400; }
  .nav-group { display:flex; gap:4px; }
  .today-btn { padding:6px 13px; border:1px solid var(--line); background:var(--surface); border-radius:8px; font-size:13px; font-weight:500; color:var(--ink-2); cursor:pointer; }
  .today-btn:hover { border-color:var(--ink-3); color:var(--ink); }
  .spacer { flex:1; }
  .seg { display:flex; background:var(--surface-2); border-radius:9px; padding:3px; gap:2px; }
  .seg button { border:0; background:none; padding:6px 15px; border-radius:7px; font-size:13px; font-weight:500; color:var(--ink-3); cursor:pointer; }
  .seg button:hover { color:var(--ink); }
  .seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
  .theme-btn { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); border-radius:8px; color:var(--ink-3); cursor:pointer; }
  .theme-btn:hover { color:var(--ink); border-color:var(--ink-3); }
  .theme-btn svg { width:15px; height:15px; }

  .view { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }

  /* week */
  .week-head { display:grid; grid-template-columns:60px repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line); background:var(--surface); flex:none; padding-right:12px; }
  .week-head .corner { border-right:1px solid var(--line-soft); }
  .dayhead { text-align:center; padding:9px 4px 10px; border-right:1px solid var(--line-soft); }
  .dayhead:last-child { border-right:0; }
  .dayhead .dow { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
  .dayhead .dnum { font-family:"Fraunces",Georgia,serif; font-size:20px; line-height:1.25; font-variant-numeric:tabular-nums; }
  .dayhead.is-today .dow { color:var(--now); }
  .dayhead.is-today .dnum { color:var(--surface); background:var(--now); display:inline-block; min-width:30px; border-radius:8px; font-weight:600; }

  .allday { display:grid; grid-template-columns:60px repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line); background:var(--surface); flex:none; padding-right:12px; min-height:26px; }
  .allday .adlabel { font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:right; padding:6px 9px 0 0; border-right:1px solid var(--line-soft); }
  .adcell { border-right:1px solid var(--line-soft); padding:3px; display:flex; flex-direction:column; gap:2px; }
  .adcell:last-child { border-right:0; }

  .grid-scroll { flex:1; overflow-y:auto; overflow-x:hidden; background:var(--surface); }
  .week-grid { display:grid; grid-template-columns:60px repeat(7,minmax(0,1fr)); position:relative; }
  .gutter { border-right:1px solid var(--line-soft); }
  .gutter .hr { height:52px; position:relative; }
  .gutter .hr span { position:absolute; top:-7px; right:9px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .gutter .hr:first-child span { display:none; }
  .daycol { position:relative; border-right:1px solid var(--line-soft); }
  .daycol:last-child { border-right:0; }
  .daycol.is-today { background:color-mix(in srgb,var(--now) 4%,transparent); }
  .slot { height:52px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
  .slot:hover { background:var(--accent-soft); }

  .event { position:absolute; border-radius:6px; padding:4px 7px; overflow:hidden; cursor:pointer; border:1px solid transparent; text-align:left; display:block; background:none; transition:transform .1s,box-shadow .12s; }
  .event:hover { transform:translateY(-1px); box-shadow:var(--shadow-lift); z-index:5; }
  .event .et { font-size:12.5px; font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .event .ex { font-family:"IBM Plex Mono",monospace; font-size:10.5px; opacity:.78; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
  .event.short { padding:2px 7px; }
  .event.short .ex { display:none; }
  .event .rep { position:absolute; top:4px; right:5px; opacity:.55; }
  .event .rep svg { width:10px; height:10px; display:block; }

  .adchip { font-size:11.5px; padding:2px 7px; border-radius:5px; border:1px solid transparent; cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:none; }

  .nowline { position:absolute; left:0; right:0; height:0; border-top:2px solid var(--now); z-index:6; pointer-events:none; }
  .nowline::before { content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--now); }
  .nowlabel { position:absolute; z-index:7; transform:translateY(-50%); left:6px; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500; color:var(--surface); background:var(--now); padding:1px 5px; border-radius:4px; font-variant-numeric:tabular-nums; pointer-events:none; }

  /* month */
  .month-grid { flex:1; display:grid; grid-template-rows:auto repeat(6,minmax(0,1fr)); background:var(--surface); min-height:0; }
  .month-dows { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line); }
  .month-dows div { font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:9px 0; }
  .month-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-bottom:1px solid var(--line-soft); min-height:0; }
  .month-row:last-child { border-bottom:0; }
  .mcell { border-right:1px solid var(--line-soft); padding:5px 6px; display:flex; flex-direction:column; gap:2px; min-width:0; min-height:0; overflow:hidden; cursor:pointer; }
  .mcell:last-child { border-right:0; }
  .mcell:hover { background:var(--surface-2); }
  .mcell.out { background:var(--ground); }
  .mcell.out .mnum { color:var(--ink-3); opacity:.5; }
  .mnum { font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; align-self:flex-start; padding:1px 5px; border-radius:5px; }
  .mcell.is-today .mnum { background:var(--now); color:var(--surface); font-weight:500; }
  .chip { font-size:11.5px; padding:2px 6px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid transparent; cursor:pointer; text-align:left; display:block; width:100%; background:none; }
  .chip .ct { font-family:"IBM Plex Mono",monospace; font-size:10px; opacity:.8; margin-right:4px; }
  .more { font-size:11px; color:var(--ink-3); padding:1px 6px; }

  /* dialogs */
  .scrim { position:fixed; inset:0; background:rgba(16,16,32,.45); backdrop-filter:blur(2px); display:grid; place-items:center; z-index:50; padding:20px; }
  .scrim[hidden] { display:none; }
  .sheet { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lift); width:min(470px,100%); max-height:min(88vh,760px); display:flex; flex-direction:column; }
  .sheet-head { display:flex; align-items:center; gap:10px; padding:16px 18px 12px; border-bottom:1px solid var(--line-soft); }
  .sheet-head h2 { font-family:"Fraunces",Georgia,serif; font-size:19px; font-weight:600; margin:0; letter-spacing:-.01em; flex:1; }
  .sheet-body { padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:13px; }
  .sheet-foot { display:flex; gap:9px; align-items:center; padding:13px 18px; border-top:1px solid var(--line-soft); }

  .title-in { width:100%; border:0; border-bottom:2px solid var(--line); background:none; padding:6px 2px 8px; font-size:19px; font-family:"Fraunces",Georgia,serif; font-weight:600; }
  .title-in::placeholder { color:var(--ink-3); font-weight:400; }
  .title-in:focus { outline:0; border-bottom-color:var(--accent); }

  .frow { display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:start; }
  .frow > svg { width:16px; height:16px; color:var(--ink-3); margin-top:8px; justify-self:center; }
  .fstack { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }

  .inp { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--ground); color:var(--ink); font-size:13.5px; }
  .inp:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
  input.inp[type="date"], input.inp[type="time"] { font-family:"IBM Plex Mono",monospace; font-size:12.5px; }
  .grow { flex:1; min-width:120px; }
  textarea.inp { width:100%; resize:vertical; min-height:66px; font-size:13.5px; }
  .dash { color:var(--ink-3); }

  .chk { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); cursor:pointer; }
  .chk input { width:15px; height:15px; accent-color:var(--accent); }

  .dots { display:flex; gap:7px; flex-wrap:wrap; }
  .dot { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; display:grid; place-items:center; }
  .dot[aria-pressed="true"] { border-color:var(--ink); }
  .dot svg { width:11px; height:11px; color:var(--surface); opacity:0; }
  .dot[aria-pressed="true"] svg { opacity:1; }

  .datechips { display:flex; flex-wrap:wrap; gap:6px; }
  .dchip { display:inline-flex; align-items:center; gap:5px; padding:3px 7px 3px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:11.5px; border:1px solid transparent; }
  .dchip button { border:0; background:none; cursor:pointer; color:inherit; opacity:.7; font-size:14px; line-height:1; padding:0 1px; }
  .dchip button:hover { opacity:1; }
  .addchip { padding:3px 10px; border-radius:20px; border:1px dashed var(--line); background:none; color:var(--ink-3); font-size:12px; cursor:pointer; }
  .addchip:hover { border-color:var(--accent); color:var(--accent); }

  .btn { padding:9px 16px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:13.5px; font-weight:500; cursor:pointer; }
  .btn:hover { border-color:var(--ink-3); color:var(--ink); }
  .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
  .btn.primary:hover { filter:brightness(1.08); }
  .btn.danger { color:var(--c3-fg); border-color:transparent; margin-right:auto; }
  .btn.danger:hover { background:var(--c3-bg); border-color:var(--c3-ln); }
  .push { margin-left:auto; }

  /* custom recurrence */
  .rr-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .rr-line .lab { font-size:13.5px; color:var(--ink-2); }
  .num { width:62px; }
  .days { display:flex; gap:5px; }
  .dbtn { width:29px; height:29px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12px; cursor:pointer; font-family:"IBM Plex Mono",monospace; }
  .dbtn[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500; }
  .radios { display:flex; flex-direction:column; gap:9px; }
  .radio { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2); }
  .radio input[type="radio"] { width:15px; height:15px; accent-color:var(--accent); }

  .scope { display:flex; flex-direction:column; gap:10px; }

  @media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
  @media (max-width:880px) { .app { grid-template-columns:1fr; } .side { display:none; } .month-title { font-size:20px; } }

/* ── additions for the multi-user application ────────────────────── */

.signin{ height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden }
.signin[hidden]{ display:none }
.signin::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 520px at 50% -8%, var(--surface-2), transparent 68%) }
.signin-card{ position:relative; width:min(392px,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lift);
  padding:40px 36px 26px; display:flex; flex-direction:column; gap:17px }
.crest{ width:82px; height:82px; border-radius:50%; align-self:center;
  box-shadow:0 0 0 1px var(--line),0 8px 26px -10px rgba(44,26,22,.6) }
.signin h1{ font-family:"Fraunces",Georgia,serif; font-size:27px; font-weight:600;
  margin:2px 0 0; text-align:center; letter-spacing:-.02em }
.signin .host{ text-align:center; color:var(--ink-3); font-size:11px; margin:-13px 0 6px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.1em }
.fld{ display:flex; flex-direction:column; gap:6px }
.fld label{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3) }
.fld input{ padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--ground); color:var(--ink); font-size:14.5px }
.fld input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent }
.btn.wide{ width:100%; justify-content:center; padding:13px; font-size:15px }
.signin .note{ text-align:center; font-size:11.5px; color:var(--ink-3);
  border-top:1px solid var(--line-soft); padding-top:15px; margin-top:3px; line-height:1.7 }
.signin .note code{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3) }
.signin .err{ color:var(--now) }

.app[hidden]{ display:none }

.who{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft) }
.who-mail{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.link-btn{ background:none; border:0; padding:0; cursor:pointer; color:var(--accent);
  font:inherit; font-size:11px; font-weight:600; margin-top:5px }
.link-btn:hover{ text-decoration:underline }
.sec-label .link-btn{ float:right; margin-top:0; font-size:10px; letter-spacing:0; text-transform:none }

.cal-row .cal-shared{ font-family:"IBM Plex Mono",monospace; font-size:8.5px;
  color:var(--ink-3); letter-spacing:.06em; margin-left:5px }

.shares{ display:flex; flex-direction:column; gap:6px }
.share{ display:flex; align-items:center; gap:8px; padding:6px 9px;
  background:var(--ground); border:1px solid var(--line); border-radius:8px; font-size:13px }
.share .addr{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.share select{ font:inherit; font-size:12px; padding:2px 5px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); color:var(--ink) }
.share .x{ background:none; border:0; cursor:pointer; color:var(--ink-3); font-size:16px; line-height:1; padding:0 3px }
.share .x:hover{ color:var(--now) }
.share-add{ display:flex; gap:7px; margin-top:9px }
.share-add .inp:first-child{ flex:1; min-width:0 }
.hint{ font-size:11.5px; color:var(--ink-3); line-height:1.6; margin:11px 0 0 }

.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); padding:9px 16px; border-radius:9px;
  font-size:13px; box-shadow:var(--shadow-lift); z-index:90; max-width:min(440px,90vw) }
.toast[hidden]{ display:none }

.ro-note{ font-size:11.5px; color:var(--ink-3); margin:0 }

/* The shell must be exactly one viewport tall, with the hour grid scrolling
   inside it. Without a constrained row, the 24-hour column stretches the whole
   layout past the fold — evening hours become unreachable and the sidebar's
   footer is pushed off-screen. */
.app{ grid-template-rows:minmax(0,1fr); }
.side, .main{ min-height:0; }

.sec-label .auto{ font-family:"IBM Plex Mono",monospace; font-size:8.5px;
  letter-spacing:.08em; color:var(--ink-3); text-transform:none; margin-left:6px }