/* ---------- ROOM-1 Reading Room (desktop) ----------
     Everything here is scoped to html.room, which js/room.js sets ONLY when the
     Reading Room is on (FLAGS.readingRoom or ?room=1) AND the desktop layout is
     active. With the flag off this file matches nothing. Rollback: git tag
     pre-reading-room.

     Two camera positions, one set of nodes:
       body[data-tab="home"]  sitting on the couch - cup close, shelf across the room
       any other tab          standing at the shelf - today's layout, room around it
     The walk between them is CSS transforms on #sideCoffee / #sideShelf / the scene,
     never on the WebGL canvases' sizes (no re-fit, no context churn). */

  #nav-home, #roomArm{display:none;}

  html.room body{
    --rm-walk:1100ms; --rm-ease:cubic-bezier(.65,0,.25,1);
    --rm-wall:#cfb898; --rm-wall-top:#c2a888; --rm-floor:#8a6447; --rm-floor-dk:#76533a;
    --rm-trim:#4a3324; --rm-table:#7a4f31; --rm-table-dk:#5c3b24;
    --rm-chair:#6f8a6a; --rm-chair-dk:#5f7a5b; --rm-shade:#e9c58a;
    --rm-sky1:#f0a36a; --rm-sky2:#f7d39a; --rm-sun:#fff4c8; --rm-rug:#b0553a;
    --rm-glow:rgba(255,213,138,.55); --rm-sun-beam:rgba(255,226,170,.26); --rm-shadow:rgba(40,24,10,.28);
  }
  html.room body.dark{
    --rm-wall:#2b2219; --rm-wall-top:#221a13; --rm-floor:#22180f; --rm-floor-dk:#1a120b;
    --rm-trim:#120c07; --rm-table:#3d2717; --rm-table-dk:#2a1a0f;
    --rm-chair:#3e5240; --rm-chair-dk:#334535; --rm-shade:#d9a85a;
    --rm-sky1:#1d2547; --rm-sky2:#3c3f6e; --rm-sun:#fdf3d2; --rm-rug:#5a2a1d;
    --rm-glow:rgba(255,196,110,.42); --rm-sun-beam:rgba(150,170,230,.08); --rm-shadow:rgba(0,0,0,.5);
  }
  html.room #backdropFx{display:none;}

  /* ---------- the room ---------- */
  #roomFx{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
  #roomFx .rm-scene{position:absolute; inset:-3%; transform-origin:30% 75%;
    transition:transform var(--rm-walk) var(--rm-ease);}
  .rm-scene > *{position:absolute;}
  .rm-wall{inset:0; background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 2px, transparent 2px 96px),
    linear-gradient(180deg, var(--rm-wall-top), var(--rm-wall) 45%);}
  .rm-light{inset:0; background:linear-gradient(115deg, var(--rm-sun-beam) 0%, transparent 46%);}
  .rm-window{width:clamp(180px, 15vw, 260px); left:50%; top:13%; transform:translateX(-50%);
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.18)); opacity:0; transition:opacity .6s ease;}
  /* the window is behind the page you read; you only see it from the couch */
  html.room body[data-tab="home"] .rm-window{opacity:1;}
  .rm-floor{left:0; right:0; bottom:0; height:25%;
    border-top:12px solid var(--rm-trim); box-shadow:0 -8px 18px rgba(0,0,0,.12);
    background:
      repeating-linear-gradient(180deg, transparent 0 calc(25% - 2px), rgba(0,0,0,.09) calc(25% - 2px) 25%),
      linear-gradient(180deg, var(--rm-floor-dk), var(--rm-floor));}
  .rm-rug{left:50%; bottom:4%; width:62vw; height:11vh; transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(ellipse at center, var(--rm-rug) 0 60%, transparent 63%); opacity:.42;}
  .rm-chair{left:-7vw; bottom:5%; width:clamp(220px, 21vw, 340px); opacity:.85;
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.22)); transition:opacity .6s ease;}
  .rm-lamp{right:2.5vw; bottom:9%; height:62vh; width:auto;}
  .rm-lampglow{right:calc(2.5vw - 160px); bottom:calc(9% + 62vh - 230px); width:380px; height:380px; border-radius:50%;
    background:radial-gradient(circle, var(--rm-glow), transparent 68%);}
  .rm-vignette{inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(28,18,10,.32));}

  /* the cup stands on a little table; the shelf hangs on the wall */
  html.room #sideCupHolder{position:relative;}
  html.room #sideCupHolder::after{content:""; position:absolute; z-index:-1; left:-16%; right:-16%;
    top:79%; height:calc(16px + var(--rm-leg, 320px)); border-radius:5px 5px 0 0;
    background:
      linear-gradient(var(--rm-table), var(--rm-table)) top / 100% 16px no-repeat,
      linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0)) 0 16px / 100% 12px no-repeat,
      linear-gradient(var(--rm-table-dk), var(--rm-table-dk)) 10% 16px / 12px 100% no-repeat,
      linear-gradient(var(--rm-table-dk), var(--rm-table-dk)) 90% 16px / 12px 100% no-repeat;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.2));}
  html.room .side-shelf .shelf3d-wrap{position:relative;}
  html.room .side-shelf .shelf3d-wrap::before{content:""; position:absolute; z-index:-1; inset:8% 8% 0;
    background:radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.32), transparent 70%); filter:blur(14px);}

  /* the page you read sits in the room like a sheet of paper on a stand */
  html.room main{background:var(--bg); border-radius:24px; margin-top:14px; margin-bottom:96px;
    box-shadow:0 24px 70px var(--rm-shadow), 0 0 0 1px rgba(0,0,0,.04);
    transition:background-color .5s ease, box-shadow .5s ease;}

  /* ---------- the couch (Home) ---------- */
  html.room #nav-home{display:flex;}
  html.room .side-coffee, html.room .side-shelf{transition:transform var(--rm-walk) var(--rm-ease);}
  html.room body[data-tab="home"] .side-coffee{transform:translate(1vw, 15vh) scale(1.16); transform-origin:100% 0;}
  html.room body[data-tab="home"] .side-shelf{transform:translate(3vw, 5vh) scale(.88); transform-origin:0 0;}
  html.room body[data-tab="home"] #roomFx .rm-scene{transform:scale(1.05) translateY(1.5%);}
  html.room body[data-tab="home"] .rm-chair{opacity:0;}
  html.room body[data-tab="home"] main{background:transparent; box-shadow:none;}
  html.room #roomArm{display:block; position:fixed; left:-60px; bottom:-30px; width:clamp(260px, 26vw, 440px);
    z-index:6; pointer-events:none; opacity:0; transform:translate(-25%, 75%);
    filter:drop-shadow(0 -6px 18px rgba(0,0,0,.25));
    transition:transform var(--rm-walk) var(--rm-ease), opacity .7s ease;}
  html.room #roomArm svg{display:block; width:100%; height:auto;}
  html.room body[data-tab="home"] #roomArm{opacity:1; transform:none;}

  .rm-home{margin-top:34vh; padding:22px 24px; border-radius:22px; background:var(--card);
    box-shadow:0 18px 50px var(--rm-shadow); display:flex; flex-direction:column; gap:14px;}
  .rm-home h2{margin:0; text-wrap:balance;}
  .rm-home .sub{margin:-8px 0 0;}
  .rm-book{display:flex; align-items:center; gap:14px; padding:12px; border-radius:16px; background:var(--surface-2);}
  .rm-book .rm-cov{width:48px; height:72px; flex:none; border-radius:4px; object-fit:cover;}
  .rm-bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
  .rm-k{margin:0; font-size:var(--fs-xs); font-weight:600; color:var(--muted);}
  .rm-ttl{all:unset; cursor:pointer; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .rm-ttl:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
  .rm-pg{margin:0; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums;}
  .rm-bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden;}
  .rm-bar i{display:block; height:100%; border-radius:3px; background:var(--accent);}
  .rm-log{flex:none;}
  .rm-empty{margin:0; color:var(--muted);}
  .rm-walk{align-self:flex-start; padding:10px 16px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink); font:600 var(--fs-sm, 14px) var(--sans); cursor:pointer;
    transition:background .15s ease, transform .2s cubic-bezier(.25,1,.5,1);}
  .rm-walk:hover{background:var(--accent-soft);}
  .rm-walk:hover span{display:inline-block; transform:translateX(3px); transition:transform .2s cubic-bezier(.25,1,.5,1);}
  .rm-walk:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  @media (prefers-reduced-motion: reduce){
    #roomFx .rm-scene, html.room .side-coffee, html.room .side-shelf, html.room #roomArm,
    html.room main, .rm-chair{transition:opacity .2s ease;}
  }

  /* ---------- ROOM-2: the real 3D room (js/room3d.js) ----------
     html.room3d is set when the three.js room started; the flat scene above is then
     never drawn (it stays as the no-WebGL fallback). The seat's own arm, the desk and
     the shelf's wall all come from the 3D room, so the CSS stand-ins step aside. */
  html:not(.room) #roomFx{display:none;}
  #roomFx.rm3d .rm-gl{position:absolute; inset:0; width:100%; height:100%; display:block;}
  #roomFx.rm3d::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(28,18,10,.28));}
  html.room.room3d #roomArm{display:none;}
  html.room.room3d #sideCupHolder::after{content:none;}
  html.room.room3d body[data-tab="home"] #roomFx .rm-scene{transform:none;}

  /* "Welcome home": app open only, Room view only, ~1-2 s while the room loads */
  #roomWelcome{position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; cursor:pointer;
    background:radial-gradient(ellipse at 50% 40%, #f6e7cf, #e2c9a4 70%, #cfb08a);
    transition:opacity .4s ease, visibility 0s linear .4s;}
  body.dark #roomWelcome{background:radial-gradient(ellipse at 50% 40%, #3a2c20, #221911 70%, #150f0a);}
  #roomWelcome.out{opacity:0; visibility:hidden;}
  #roomWelcome .rw-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
    animation:rw-in .6s cubic-bezier(.25,1,.5,1) both;}
  #roomWelcome .rw-k{margin:0; font:600 var(--fs-xs, 12px) var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  #roomWelcome h2{margin:0; font-size:clamp(28px, 3.4vw, 44px); color:var(--ink); text-wrap:balance;}
  #roomWelcome .rw-sub{margin:0; color:var(--muted);}
  #roomWelcome .rw-dots{display:flex; gap:6px; margin-top:10px;}
  #roomWelcome .rw-dots i{width:6px; height:6px; border-radius:50%; background:var(--accent, #a05c2c); opacity:.35;
    animation:rw-dot 1.1s ease-in-out infinite;}
  #roomWelcome .rw-dots i:nth-child(2){animation-delay:.15s;} #roomWelcome .rw-dots i:nth-child(3){animation-delay:.3s;}
  @keyframes rw-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  @keyframes rw-dot{0%,100%{opacity:.25;} 50%{opacity:1;}}
  @media (prefers-reduced-motion: reduce){
    #roomWelcome .rw-card, #roomWelcome .rw-dots i{animation:none;}
  }

  /* ---------- "Make it yours" panel (js/room-customize.js) ----------
     A side panel, not a modal sheet: the room stays in view and changes live. */
  .rm-acts{display:flex; flex-wrap:wrap; gap:8px;}
  #roomCustom{position:fixed; top:12px; right:12px; bottom:12px; width:min(380px, calc(100vw - 24px)); z-index:9000;
    display:flex; flex-direction:column; background:var(--card); color:var(--ink); border-radius:20px;
    box-shadow:0 24px 70px rgba(30,18,8,.32), 0 0 0 1px rgba(0,0,0,.05);
    transform:translateX(calc(100% + 24px)); visibility:hidden;
    transition:transform .38s cubic-bezier(.25,1,.5,1), visibility 0s linear .38s;}
  #roomCustom.open{transform:none; visibility:visible; transition:transform .38s cubic-bezier(.25,1,.5,1);}
  #roomCustom .rc-hd{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 6px;}
  #roomCustom .rc-hd h3{margin:0;}
  #roomCustom .rc-hd .sheet-x{position:relative; top:auto; float:none; margin:0;}   /* relative: its ::before hit area must not span the panel */
  #roomCustom .rc-tabs{display:flex; gap:6px; overflow-x:auto; padding:6px 18px 10px; scrollbar-width:none;
    border-bottom:1px solid var(--line);}
  #roomCustom .rc-tabs button{flex:none; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
    background:transparent; color:var(--ink); font:600 var(--fs-sm, 14px) var(--sans); cursor:pointer;
    transition:background .15s ease, border-color .15s ease;}
  #roomCustom .rc-tabs button.on{background:var(--ink); color:var(--bg); border-color:var(--ink);}
  #roomCustom .rc-body{flex:1; overflow-y:auto; padding:6px 18px 12px;}
  #roomCustom .rc-grp{border:0; margin:0; padding:12px 0; border-bottom:1px solid var(--line); min-width:0;}
  #roomCustom .rc-grp:last-child{border-bottom:0;}
  #roomCustom legend{padding:0; margin-bottom:8px; font-weight:700; font-size:var(--fs-sm, 14px);}
  #roomCustom .rc-chips{display:flex; flex-wrap:wrap; gap:6px;}
  #roomCustom .rc-chip{padding:7px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2);
    color:var(--ink); font:500 var(--fs-sm, 14px) var(--sans); cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .12s ease;}
  #roomCustom .rc-chip:hover{border-color:var(--muted);}
  #roomCustom .rc-chip:active{transform:scale(.97);}
  #roomCustom .rc-chip.on{border-color:var(--accent); background:var(--accent-soft); font-weight:700;}
  #roomCustom .rc-turn{align-items:center; margin-bottom:6px;}
  #roomCustom .rc-turn span{min-width:96px; font-size:13px;}
  #roomCustom .rc-turn .rc-chip{font-size:16px; line-height:1; padding:6px 12px;}
  #roomCustom .rc-hint{margin:14px 0 0; font-size:12px; color:var(--muted);}
  /* the overview: a calm first page */
  #roomCustom .rc-intro{margin:2px 0 14px; color:var(--muted); font-size:var(--fs-sm, 14px); line-height:1.45;}
  #roomCustom .rc-group{margin-bottom:16px;}
  #roomCustom .rc-gh{margin:0 0 8px; font-size:var(--fs-xs, 12px); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint, var(--muted));}
  #roomCustom .rc-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  #roomCustom .rc-tile{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:12px 14px;
    border-radius:14px; background:var(--surface-2); border:1px solid var(--line); transition:border-color .15s ease, transform .2s cubic-bezier(.25,1,.5,1);}
  #roomCustom .rc-tile b{font-size:var(--fs-sm, 14px);}
  #roomCustom .rc-tile span{font-size:var(--fs-xs, 12px); color:var(--muted);}
  #roomCustom .rc-tile:hover{border-color:var(--accent);}
  #roomCustom .rc-tile:active{transform:scale(.98);}
  #roomCustom .rc-tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  #roomCustom .rc-back{all:unset; cursor:pointer; font-size:26px; line-height:1; padding:0 10px 2px 0; color:var(--muted);}
  #roomCustom .rc-back:hover{color:var(--ink);}
  #roomCustom .rc-back:focus-visible{outline:2px solid var(--accent); border-radius:6px;}
  #roomCustom .rc-hd h3{flex:1;}
  #roomCustom .rc-more{margin-top:6px; border-top:1px solid var(--line);}
  #roomCustom .rc-more summary{cursor:pointer; padding:12px 0 6px; font-weight:600; font-size:var(--fs-sm, 14px); color:var(--muted);}
  #roomCustom .rc-more summary:hover{color:var(--ink);}
  #roomCustom .rc-reset{font-size:var(--fs-xs, 12px); color:var(--muted);}
  #roomCustom .rc-range{display:flex; align-items:center; gap:10px; font-size:var(--fs-xs, 12px); color:var(--muted);}
  #roomCustom .rc-range input{flex:1; accent-color:var(--accent);}
  #roomCustom .rc-note{margin:10px 0 0; font-size:var(--fs-xs, 12px); color:var(--muted); line-height:1.5;}
  #roomCustom .rc-note .linklike{font-size:inherit;}
  #roomCustom .rc-sw{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center;}
  #roomCustom .rc-sw button, #roomCustom .rc-own{width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
    border:2px solid var(--card); background:var(--c); box-shadow:0 0 0 1px rgba(0,0,0,.18);
    transition:box-shadow .15s ease, transform .12s ease;}
  #roomCustom .rc-sw button:hover{transform:scale(1.08);}
  #roomCustom .rc-sw button.on{box-shadow:0 0 0 2px var(--ink);}
  #roomCustom .rc-own{position:relative; display:grid; place-items:center; background:conic-gradient(#e66, #ec6, #6c6, #6ce, #66e, #e6e, #e66);
    color:#fff; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5); overflow:hidden;}
  #roomCustom .rc-own input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
  #roomCustom .rc-switch{display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer;}
  #roomCustom .rc-ft{display:flex; justify-content:space-between; align-items:center; padding:12px 18px 16px;
    border-top:1px solid var(--line);}
  #roomCustom :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  /* while customizing, the page steps aside so you can see the room */
  html.room.rc-open main{opacity:.0; pointer-events:none; transition:opacity .3s ease;}
  html.room main{transition:opacity .3s ease;}
  .ob-room{margin:10px 0 4px;} .ob-room .sub{margin:0 0 6px;}
  @media (prefers-reduced-motion: reduce){ #roomCustom{transition:none;} }
  /* customizing: the room is the subject - the cup and shelf step aside too */
  html.room .side-coffee, html.room .side-shelf{transition:transform var(--rm-walk) var(--rm-ease), opacity .3s ease;}
  html.room.rc-open .side-coffee, html.room.rc-open .side-shelf,
  html.room-phone.rc-open #mobileWidgets .side-coffee, html.room-phone.rc-open #mobileWidgets .side-shelf,
  html.room-phone.rc-open #mobileWidgets .mw-chip{opacity:0; pointer-events:none;}
  html.room-phone #mobileWidgets .side-coffee, html.room-phone #mobileWidgets .side-shelf{transition:opacity .3s ease;}

  /* ---------- phones (opt-in): the room behind the cup-and-shelf band ----------
     js/room.js moves #roomFx into #mobileWidgets and sets html.room-phone. The band
     becomes a little window into the room; the cup stands on the desk, the shelf on
     the wall. Nothing else on the page changes. */
  html:not(.room):not(.room-phone) #roomFx{display:none;}
  html.room-phone #mobileWidgets #roomFx{position:absolute; inset:0; z-index:0; display:block; overflow:hidden;
    border-radius:0 0 22px 22px; box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);}
  html.room-phone #mobileWidgets #roomFx::after{background:linear-gradient(180deg, rgba(20,12,6,.18), transparent 30%, transparent 80%, rgba(20,12,6,.18));}
  html.room-phone #mobileWidgets .side-coffee, html.room-phone #mobileWidgets .side-shelf{position:relative; inset:auto; z-index:1;}
  html.room-phone #mobileWidgets .mw-chip{z-index:2;}
  /* the Make-it-yours panel becomes a bottom sheet so the band stays in view above it */
  @media (max-width:700px){
    #roomCustom{top:auto; left:8px; right:8px; bottom:8px; width:auto; height:min(62vh, 560px);
      transform:translateY(calc(100% + 24px));}
  }

  /* ---------- Room view on/off, right by the cup (js/room.js _roomToggleUi) ----------
     Only exists when the Reading Room is available (flag or ?room=1 preview). */
  #roomToggle{display:flex; align-items:center; gap:6px; margin:12px auto 0; padding:6px 12px 6px 10px;
    border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink);
    font:600 var(--fs-xs, 12px) var(--sans); cursor:pointer; box-shadow:var(--e1);
    transition:background .15s ease, border-color .15s ease, transform .12s ease;}
  #roomToggle svg{width:15px; height:15px;}
  #roomToggle:hover{border-color:var(--muted);}
  #roomToggle:active{transform:scale(.97);}
  #roomToggle[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent);}
  #roomToggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  #mobileWidgets #roomToggle{display:none;}
  #mobileWidgets .mw-chip.room{top:8px; right:8px; bottom:auto;}
  #mobileWidgets .mw-chip.room[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent);}
  /* the 3D room moves the cup and shelf itself (glued to the sill and the wall, every
     frame of the walk), so no CSS transition may smear that motion */
  html.room.room3d .side-coffee, html.room.room3d .side-shelf{transition:opacity .3s ease;}

  /* ---------- NOOK-1: "Your Nook" on the Home tab (js/nook3d.js) ----------
     html.nook = the reader has the nook on (desktop). Only the Home tab changes: the
     side cup and shelf step aside there because they're INSIDE the nook. */
  html.nook #nav-home{display:flex;}
  html.nook body[data-tab="home"] .side-coffee, html.nook body[data-tab="home"] .side-shelf{visibility:hidden;}
  /* computer: the nook on the left, the welcome card beside it; the side columns step
     aside on Home, so the pair gets the page's full width */
  .nook-wrap{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:18px; align-items:center;
    width:min(1200px, 96vw); margin:6px 0 0 calc(50% - min(600px, 48vw));}
  .nook-stage{position:relative; height:clamp(380px, calc(100vh - 190px), 760px); border-radius:24px; overflow:hidden;
    background:radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--card) 75%, transparent), transparent 70%);}
  @media (max-width:1000px){ .nook-wrap{grid-template-columns:1fr; width:auto; margin-left:0;} }
  .nook-stage canvas{display:block; width:100%; height:100%; cursor:grab; outline:none;}
  .nook-stage canvas:active{cursor:grabbing;}
  .nook-stage canvas:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); border-radius:24px;}
  .nook-stage canvas:focus:not(:focus-visible){box-shadow:none;}
  .nook-wrap .rm-home{margin-top:0; max-height:clamp(380px, calc(100vh - 190px), 760px); overflow-y:auto; overscroll-behavior:contain;}
  /* Home card extras: the week, + Add a book, Up next, Recently finished, friends */
  .rm-week{display:flex; flex-direction:column; gap:6px;}
  .rm-week .rc-week{display:flex; justify-content:space-between; gap:4px;}
  .rm-week .rc-day{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--muted);}
  .rm-week .rc-dot{width:36px; height:36px;}
  .rm-add{position:relative;}
  .rm-plus{background:var(--accent); color:var(--on-accent, #fff); border-color:transparent;}
  .rm-plus:hover{background:color-mix(in srgb, var(--accent) 88%, black);}
  .rm-plus span{font-size:1.15em; line-height:1;}
  .rm-addm{position:absolute; z-index:5; top:calc(100% + 6px); left:0; min-width:170px; padding:6px; border-radius:14px;
    background:var(--card); border:1px solid var(--line); box-shadow:0 12px 30px var(--rm-shadow, rgba(0,0,0,.18)); display:flex; flex-direction:column;}
  .rm-addm[hidden]{display:none;}
  .rm-addm button{all:unset; cursor:pointer; padding:9px 12px; border-radius:10px; font:600 var(--fs-sm, 14px) var(--sans); color:var(--ink);}
  .rm-addm button:hover, .rm-addm button:focus-visible{background:var(--accent-soft);}
  .rm-row{display:flex; flex-direction:column; gap:8px;}
  .rm-row-hd{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .rm-more{font-size:var(--fs-xs, 12px); color:var(--muted);}
  .rm-covs{display:flex; gap:8px;}
  .rm-cv{all:unset; cursor:pointer; flex:none; border-radius:5px; transition:transform .2s cubic-bezier(.25,1,.5,1);}
  .rm-cv:hover{transform:translateY(-3px);}
  .rm-cv:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .rm-cv .rm-cv-img{display:block; width:46px; height:69px; border-radius:4px; object-fit:cover; box-shadow:0 3px 8px rgba(0,0,0,.18);}
  .rm-friends ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm, 14px);}
  .rm-friends i{font-style:normal; font-weight:600;}
  .rm-classic{align-self:flex-start; font-size:var(--fs-xs, 12px); color:var(--muted);}