/* ================================================================
   Daylight — the frame: dock · folder tree · main tile · header · tabs ·
   widget stack · status bar. Scoped to body.surface-daylight.

   Layout (left → right): the dock (48px) and the folder tree sit straight on
   the desk like a Mac sidebar; the page is one white tile; the right panel's
   blocks are separate tiles on the desk.
   ================================================================ */

body.surface-daylight #app { padding: 12px 12px 12px 0; gap: 12px; }

/* ---- The dock: ICONS ONLY, name on hover ----

   It was 80px of 64px buttons carrying an icon over an 11px label, and those
   labels cost 32px of every window for words that do not change: a person
   learns nine icons in a day and then reads them for years. The horizontal
   space is worth more — it is the measure a note is read at, and the room the
   Study page's second column needs.

   The name is not lost, it moves: relabel() in daylight-dom.js puts it on the
   button as title (the hover) and aria-label (the accessible name, which a
   display:none label would otherwise take away). */
body.surface-daylight #dock {
  width: 48px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 0 0; min-height: 0;
}
body.surface-daylight #dock .dock-top,
body.surface-daylight #dock .dock-bottom { display: flex; flex-direction: column; align-items: center; gap: 2px; }
body.surface-daylight #dock .dock-bottom { margin-top: auto; padding-top: 8px; }
body.surface-daylight #dock .dock-nav-slot {
  display: flex; flex-direction: column; align-items: center;
  min-height: 0; overflow-y: auto; scrollbar-width: none;
}
body.surface-daylight #dock .dock-nav-slot::-webkit-scrollbar { display: none; }
body.surface-daylight #dock .dock-divider { width: 24px; height: 1px; background: var(--border); margin: 6px 0; }

body.surface-daylight #primary-nav { padding: 0; gap: 2px; align-items: center; }
body.surface-daylight #primary-nav .pnav-btn,
body.surface-daylight #dock .dock-btn {
  width: 40px; height: 40px; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none;
  color: var(--text-muted); font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
/* The labels themselves. Only inside the dock — the SAME buttons go back to
   the top of the sidebar with their names showing when Daylight is switched
   off, which is the whole reason the dock borrows them rather than building
   its own. */
body.surface-daylight #dock .pnav-label,
body.surface-daylight #dock .dock-label { display: none; }
/* The hover name. On <body> rather than inside the button, because the nav
   slot scrolls and would clip it at the rail's edge — daylight-dom.js places
   it. No transition in or out: the delay is the thing being removed. */
/* The hover name lives in style.css as #app-tip now — tooltip.js serves the
   dock and the file tree from one element. */
body.surface-daylight #primary-nav .pnav-btn:hover,
body.surface-daylight #dock .dock-btn:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #primary-nav .pnav-btn.active {
  background: var(--card-bg); color: var(--text-heading); font-weight: 600;
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.08), 0 0 0 1px rgba(31, 28, 24, 0.04);
}
body.surface-daylight:not(.theme-light) #primary-nav .pnav-btn.active { box-shadow: var(--dl-shadow); }
body.surface-daylight #primary-nav .pnav-ic { width: 22px; height: 22px; opacity: 1; color: inherit; }
body.surface-daylight #primary-nav .pnav-ic svg { width: 22px; height: 22px; }
body.surface-daylight #primary-nav .pnav-btn.active .pnav-ic { color: var(--accent); }
body.surface-daylight #dock .dock-ic { display: inline-flex; width: 22px; height: 22px; }
body.surface-daylight #dock .dock-ic svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body.surface-daylight #dock .dock-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #D8CFC2; color: #1F1C18; font-size: 12px; font-weight: 600;
}
body.surface-daylight:not(.theme-light) #dock .dock-avatar { background: #4A453F; color: #F2EFEA; }
body.surface-daylight #dock .dock-avatar.dock-avatar-empty { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---- The folder tree: always visible, straight on the desk ---- */
body.surface-daylight #left-sidebar {
  width: 264px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.surface-daylight .sidebar-tabs {
  margin: 2px 8px 6px; padding: 3px; gap: 2px;
  border-radius: 10px; background: var(--dl-segment);
}
body.surface-daylight .sidebar-tab {
  padding: 5px 4px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
}
body.surface-daylight .sidebar-tab:hover { background: transparent; color: var(--text-heading); }
body.surface-daylight .sidebar-tab.active {
  background: var(--card-bg); color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.12);
}
body.surface-daylight .pane-header { padding: 8px 12px 6px 14px; }
body.surface-daylight .vault-name { font-size: 13px; font-weight: 500; color: var(--text-muted); }
body.surface-daylight #file-tree { padding: 0 6px 8px; }
body.surface-daylight .tree-item {
  padding: 6px 10px; border-radius: 8px;
  font-size: 14px; color: var(--text-normal);
}
body.surface-daylight .tree-item:hover { background: var(--dl-hover); color: var(--text-heading); }
/* 600 AGAINST THE COLUMN'S 500 — restored by hand after the scale came down a
   step. The row you are on is the one thing in this column worth finding at a
   glance, and the general quietening had flattened it to the same weight as
   every folder around it. It has a tile and a shadow too, but weight is what
   reads first. */
body.surface-daylight .tree-item.active {
  background: var(--card-bg); color: var(--text-heading); font-weight: 600;
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.08), 0 0 0 1px rgba(31, 28, 24, 0.04);
}
body.surface-daylight:not(.theme-light) .tree-item.active { box-shadow: var(--dl-shadow); }
body.surface-daylight .tree-item.active .tree-icon { color: var(--accent); }
body.surface-daylight .tree-icon { color: var(--text-muted); }
body.surface-daylight .tree-count { font-size: 12px; color: var(--text-muted); }
body.surface-daylight .tree-pin { color: var(--accent); }

/* ---- The page: one white tile ---- */
body.surface-daylight #main {
  background: var(--card-bg);
  border: 0; border-radius: 20px; box-shadow: var(--dl-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ---- Tabs ---- */
body.surface-daylight #tab-bar { padding: 10px 12px 0; gap: 4px; }
body.surface-daylight .tab {
  padding: 6px 8px 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
body.surface-daylight .tab:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight .tab.active { background: var(--bg-secondary); color: var(--text-heading); box-shadow: none; font-weight: 500; }

/* ---- Header: back and forward, where you are, Share, side by side, "…",
   the panel toggle. The rest moved into "…" (daylight-dom.js) or the dock. */
body.surface-daylight #view-header { height: 52px; padding: 8px 14px; gap: 8px; }
body.surface-daylight #omnibox { display: none; }
body.surface-daylight #view-header :is(#hdr-history, #hdr-download, #hdr-record, #hdr-notifs, #mode-toggle, [data-action="toggle-theme"], [data-action="settings"]) {
  display: none !important;
}
body.surface-daylight #view-header .icon-btn { width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
body.surface-daylight #view-header .icon-btn:hover { background: var(--dl-hover); color: var(--text-heading); }
body.surface-daylight #view-header .hdr-svg svg { width: 18px; height: 18px; }
body.surface-daylight #hdr-more { position: relative; }
body.surface-daylight #hdr-more svg { width: 18px; height: 18px; }
body.surface-daylight #hdr-more svg circle { fill: currentColor; stroke: none; }
body.surface-daylight #view-header #note-title {
  font-size: 15px; font-weight: 500; color: var(--text-heading);
}

/* ---- Right panel: each block its own tile on the desk ---- */
body.surface-daylight #right-sidebar {
  width: 300px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.surface-daylight .pb-list { gap: 12px; padding: 0 0 12px; }
body.surface-daylight #left-sidebar .pb-list { padding: 8px 8px 12px; }
body.surface-daylight .wg-card {
  background: var(--card-bg); border: 0; border-radius: 16px; box-shadow: var(--dl-shadow);
}
body.surface-daylight .wg-head { padding: 12px 12px 8px 14px; border-bottom: 0; }
body.surface-daylight .wg-title { font-size: 15px; font-weight: 600; color: var(--text-heading); }
body.surface-daylight .pb-add {
  border-radius: 14px; border-color: var(--border); color: var(--text-muted);
  font-size: 13px; padding: 10px 12px;
}
body.surface-daylight .pb-add:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

/* ---- Status bar: quiet words ---- */
body.surface-daylight #status-bar {
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); padding: 7px 18px;
}

/* A SHARED NOTE'S share button, on Daylight.

   Daylight re-declares .icon-btn in this header — 32px, its own colour, its own
   hover — and `#view-header .icon-btn` carries an id, so it outranks the base
   `.icon-btn.is-shared` and the "on" state would simply not appear. The colours
   are the same accent mix as the base rule rather than Daylight's chip tokens,
   which themes.js makes neutral grey here (see style.css). The fifth time
   Daylight's re-declaration of a base rule has needed exactly this. */
body.surface-daylight #view-header .icon-btn.is-shared {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
body.surface-daylight #view-header .icon-btn.is-shared:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}