/* Varelyno: make the "Your work at a glance" cards follow the WORK PANEL's own
   width (container queries), not the browser width. So the cards reflow smoothly
   as you drag the map/panel divider or expand the canvas.
   - Beside the map (side panel): up to 2 comfortable columns, down to 1 when narrow.
   - Expanded (canvas full width, panel below): breathe out to 3 then 4.
   Comfortable card minimum ≈ 280px, so cards are never thin squished strips. */

.v9-hub .hub-work-panel{container-type:inline-size;container-name:hubwork}

/* Default: a single column (very narrow panel).
   The base theme sets .command-grid to display:flex, so force grid here too. */
.v9-hub .hub-work-panel .command-grid,
.v9-hub .hub-work-panel .command-grid.v6-grid{
  display:grid!important;
  gap:12px;
  grid-template-columns:minmax(0,1fr)!important;
}

/* Side panel beside the map: at most 2 columns, whatever the screen width. */
@container hubwork (min-width:600px){
  .v9-hub .hub-work-panel .command-grid,
  .v9-hub .hub-work-panel .command-grid.v6-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Expanded (panel spans the full width below the canvas): 3 then 4 columns. */
@container hubwork (min-width:920px){
  .v9-hub .hub-layout.expanded .command-grid,
  .v9-hub .hub-layout.expanded .command-grid.v6-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@container hubwork (min-width:1240px){
  .v9-hub .hub-layout.expanded .command-grid,
  .v9-hub .hub-layout.expanded .command-grid.v6-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Stat tiles (active / future / waiting / completed): 2×2 in the narrow side
   panel, 4 across once there is room. */
.v9-hub .hub-work-panel .command-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@container hubwork (min-width:600px){
  .v9-hub .hub-work-panel .command-stats{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Browsers without container-query support: fall back to a sensible auto-fit so
   the cards still never squish below ~280px. */
@supports not (container-type:inline-size){
  .v9-hub .hub-work-panel .command-grid,
  .v9-hub .hub-work-panel .command-grid.v6-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  }
}

/* ---- Topbar: one tidy account menu instead of scattered buttons ---- */
#topbar > .user-chip{display:none!important}
#appearanceButton{display:none!important}
.owner-access.account-owner{margin-left:8px}
.account-menu{position:relative}
.account-menu>summary.account-trigger{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);transition:.14s}
.account-menu>summary.account-trigger:hover{border-color:#9fc8ec;box-shadow:0 2px 8px rgba(31,59,93,.08)}
.account-menu>summary.account-trigger::-webkit-details-marker,.account-menu>summary.account-trigger::marker{display:none;content:""}
.account-trigger .avatar-xs{flex:none}
.account-trigger-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;text-align:left}
.account-trigger-text strong{font-size:11px}
.account-trigger-text small{font-size:9px;color:var(--muted)}
.account-caret{color:var(--muted);font-size:10px;margin-left:2px}
.account-menu-pop{position:absolute;top:calc(100% + 6px);right:0;min-width:186px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 28px rgba(23,45,74,.16);padding:6px;z-index:60}
.account-menu:not([open]) .account-menu-pop{display:none}
.account-menu-pop .account-item{display:block!important;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;color:var(--text);font-size:11px;cursor:pointer;border-radius:7px;text-decoration:none}
.account-menu-pop .account-item:hover{background:var(--v9-accent-soft,#eef4fb)}
@media(max-width:700px){.account-trigger-text{display:none}}

/* ---- Premium header: transparent at top, frosted glass on scroll ---- */
/* Content slides UNDER the header (desktop): overlay it on the scroll area. */
@media(min-width:901px){
  .app-main{grid-template-rows:minmax(0,1fr)!important;position:relative}
  #topbar.topbar{position:absolute;top:0;left:0;right:0}
  .main-content{padding-top:74px!important}
}
/* The look (all sizes): frosted glass always (real gaussian blur), a touch more
   opaque and lifted once content scrolls under it. */
/* Lightly tinted so the blurred content stays visible moving underneath (iOS glass). */
#topbar.topbar{
  background:color-mix(in srgb,var(--nhs) 16%,color-mix(in srgb,var(--surface,#fff) 42%,transparent))!important;
  border-bottom:1px solid color-mix(in srgb,var(--nhs) 26%,transparent)!important;
  box-shadow:none;
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease;
  /* Must sit ABOVE .page-head (z:50 in v9.css); the topbar is position:absolute
     with a backdrop-filter, so it forms a stacking context that traps its own
     dropdowns (account menu, themes). At z:40 the page-head painted over them and
     ate the clicks — "can't open Admin panel". 90 keeps every topbar menu on top. */
  z-index:90;
}
#topbar.topbar.is-scrolled{
  background:color-mix(in srgb,var(--nhs) 22%,color-mix(in srgb,var(--surface,#fff) 62%,transparent))!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border-bottom-color:color-mix(in srgb,var(--nhs) 34%,transparent)!important;
  box-shadow:0 8px 26px rgba(23,45,74,.10);
}
/* Fallback where color-mix is unsupported. */
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  #topbar.topbar{background:rgba(255,255,255,.4)!important}
  #topbar.topbar.is-scrolled{background:rgba(255,255,255,.62)!important}
}

/* ---- Themes: hide the always-on strip; expose it as a top-right button ---- */
.universe-moodbar{display:none!important}
.themes-btn{display:inline-flex;align-items:center;gap:6px}
.themes-btn>span[aria-hidden]{color:var(--v9-accent,#276fef)}
@media(max-width:900px){.themes-btn .themes-btn-text{display:none}}

/* ---- Pro badge on the logo (small, italic, does not disturb the wordmark) ---- */
/* Pro: a solid tag in the logo's red (#ed0f68), the same in every theme */
.brand-pro{display:inline-flex;align-items:center;align-self:center;font-style:normal;font-weight:800;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--v-accent,var(--nhs));background:transparent;border:1.5px solid currentColor;border-radius:6px;padding:3px 6px 2px;margin-left:7px;flex:none;position:static;box-shadow:none}

/* ---- Sidebar nav: bolder icons + labels (default was too faded/grey) ---- */
#sidebar .nav-btn{color:var(--text)!important;font-weight:600}
#sidebar .nav-btn.active{font-weight:700}
#sidebar .nav-btn .nav-ico{color:var(--section-colour)!important}
#sidebar .nav-btn .nav-ico svg{stroke-width:2.15}
/* Favourites labels a touch stronger too */
#sidebar .fav{color:var(--text)!important;font-weight:550}

/* ---- Theme colour on each dashboard card's whole header band ---- */
/* Themes drive --nhs (rose=pink, sage=green, ocean=teal…), NOT --accent (fixed blue).
   Colour the BAND only; leave the title text in its normal colour. Cards have
   overflow:hidden, so the band is clipped to the rounded top corners. */
.v9-hub .command-card .card-head{
  background:color-mix(in srgb,var(--nhs) 15%,var(--surface,#fff))!important;
  border-bottom:1px solid color-mix(in srgb,var(--nhs) 34%,transparent)!important;
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  .v9-hub .command-card .card-head{background:var(--v9-accent-soft,#eef5f9)!important}
}

/* ---- Make the chosen theme present: tint the left sidebar with --nhs ---- */
#sidebar.sidebar{
  background:color-mix(in srgb,var(--nhs) 10%,var(--surface,#fff))!important;
  border-right:1px solid color-mix(in srgb,var(--nhs) 22%,var(--line))!important;
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  #sidebar.sidebar{background:var(--v9-accent-soft,#eef5f9)!important}
}

/* ---- Brand block: share the sidebar tint, and no divider line at the top ---- */
#sidebar .brand{background:transparent!important;border-bottom:0!important}

/* ---- ONE continuous 4-colour themed accent strip across the ENTIRE top,
        equally distributed. The header used a gradient border-image while the menu
        bar had a solid colour — that mismatch showed as "3 colours right, 1 left".
        A single full-width strip on .app-shell fixes it. ---- */
.app-shell{position:relative}
.app-shell::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none;
  background:linear-gradient(90deg,var(--hdft-blue),var(--hdft-teal),var(--hdft-pink),var(--hdft-gold));
}
#topbar.topbar{border-top:0!important;border-image:none!important}
#sidebar.sidebar{border-top:0!important}
.topbar:after{display:none!important}

/* ---- Canvas ("Your network") card: themed accent header band + matched corners ---- */
/* The header (.v9-map-head) rounds the top; the map body (.network-card) rounds the
   bottom, so the two stacked pieces read as one card with consistent 16px corners. */
.v9-hub .hub-map-panel .v9-map-head{
  background:color-mix(in srgb,var(--nhs) 15%,var(--surface,#fff))!important;
  border-bottom:1px solid color-mix(in srgb,var(--nhs) 34%,transparent)!important;
  border-radius:16px 16px 0 0!important;
}
.v9-hub .hub-map-panel .network-card{
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  .v9-hub .hub-map-panel .v9-map-head{background:var(--v9-accent-soft,#eef5f9)!important}
}

/* ---- "Your work at a glance" strip: same themed accent band as the "Your network"
        strip, so it follows the theme too. Only in the side-by-side layout, where
        the strip is a header attached to the first work card. ---- */
@media(min-width:1101px){
  .v9-hub .hub-work-panel .hub-section-head{
    background:color-mix(in srgb,var(--nhs) 15%,var(--surface,#fff))!important;
    border-bottom:1px solid color-mix(in srgb,var(--nhs) 34%,transparent)!important;
  }
  @supports not (background:color-mix(in srgb,#fff 50%,transparent)){
    .v9-hub .hub-work-panel .hub-section-head{background:var(--v9-accent-soft,#eef5f9)!important}
  }
}

/* ---- FIX: attachments are enabled (server-backed), so undo the old
        "uploads disabled" hiding that made the Attach-files buttons invisible ---- */
.att-count{display:inline-flex!important}
.att-drop{display:flex!important}
.att-actions,.att-file-actions{display:flex!important}
/* Icon-only Attach button (saves room in the crowded action row). The word
   "Attach files" moved to title/aria-label; a tiny number badge shows the count. */
.att-count.att-icon{align-items:center;gap:3px;padding:4px 6px;min-height:0}
.att-count.att-icon svg{width:15px;height:15px}
.att-count.att-icon .att-n{font-size:10px;font-weight:800;line-height:1}
.att-count.att-icon.has-files{color:var(--nhs)}

/* ---- Hero ("Your work at a glance") banner takes the theme colour (like Central Hub).
        Must out-specify universe.css `html.v-universe .hub-work-panel .command-hero`. ---- */
html.v-universe .hub-work-panel .command-hero,
.v9-hub .hub-work-panel .command-hero,
html.v-universe .command-hero,
.command-hero{
  background:linear-gradient(130deg,color-mix(in srgb,var(--nhs) 16%,var(--surface,#fff)),color-mix(in srgb,var(--nhs) 6%,var(--surface,#fff)))!important;
  border-top:3px solid color-mix(in srgb,var(--nhs) 55%,var(--surface,#fff))!important;
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  html.v-universe .hub-work-panel .command-hero,.command-hero{background:var(--v9-accent-soft,#eef5f9)!important}
}

/* ---- Notes: keep name/details inside the card, and clamp long note bodies ---- */
.note-card{overflow:hidden}
.note-card footer{flex-wrap:wrap!important;row-gap:5px;min-width:0}
.note-card footer > *{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:left}
.note-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden}

/* ---- Projects: equal-size tiles (click a card to open the full project).
        NB: .v9-hub is only on the network view, so target .project-card directly.
        Summary is 3-line clamped, so 260px fits the fullest card and pads the rest. ---- */
.project-grid{align-items:stretch}
.project-card{min-height:260px!important}

/* ---- Adaptive density for smaller / OS-scaled laptops ----
   The whole app is authored in fixed px (built on a large monitor), so on a 1080p
   or OS-scaled (125–150%) laptop everything felt oversized and cramped — users had
   to drop browser zoom to ~70–85% to feel comfortable. CSS `zoom` reproduces that
   automatically, gated by viewport width so big monitors are untouched (zoom:1).
   Media queries read the REAL viewport (unaffected by CSS zoom on the element), so
   there is no reflow loop. Height is divided by the zoom factor so the 100vh shell
   still fills the screen with no blank strip at the bottom. */
@media(max-width:1550px){ .app-shell{ zoom:.92; height:calc(100vh / .92) } }
@media(max-width:1350px){ .app-shell{ zoom:.85; height:calc(100vh / .85) } }
@media(max-width:1150px){ .app-shell{ zoom:.80; height:calc(100vh / .80) } }

/* ---- …and the other end of the same curve ----
   The scale above only ever shrinks, so a 1440p, 4K or ultrawide monitor got the
   design size and no more — correct in CSS pixels, but genuinely small to read at
   arm's length on a large screen, which is the mirror image of the 1080p problem
   this block was written to solve. The same mechanism grows it back, gently: a
   sixth more at 2560 is about one notch of browser zoom. Deliberately conservative
   — growing past the point where a line of body text runs too long would be worse
   than leaving it alone. */
/* Softened (Sept 2026): the owner would rather a big screen showed MORE than
   showed the same things bigger -- so no growth below 2560, and half the step
   above it. Browser zoom-out switches it off entirely (html.v10-own-zoom). */
@media(min-width:2560px){ .app-shell{ zoom:1.08; height:calc(100vh / 1.08) } }
@media(min-width:3300px){ .app-shell{ zoom:1.2; height:calc(100vh / 1.2) } }
/* A phone or small tablet is not a scaled-down desktop — it uses the stacked
   layout below 900px, where zoom would fight the real mobile rules. */
@media(max-width:900px){ .app-shell{ zoom:1; height:auto } }

/* ---- The menu scrolls on its own when the window is shorter than it, so the
        bottom items (Recycle Bin, Quick capture) are always reachable. ---- */
@media(min-width:901px){
  #sidebar.sidebar{height:100%;max-height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
/* the menu's scrollbar takes the theme accent */
#sidebar.sidebar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--nhs) 55%,transparent) transparent}
#sidebar.sidebar::-webkit-scrollbar{width:8px}
#sidebar.sidebar::-webkit-scrollbar-track{background:transparent}
#sidebar.sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--nhs) 45%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
#sidebar.sidebar::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--nhs) 75%,transparent)}