/* Desktop redesign, 22 Oct 2026. Every rule in this file sits inside the desktop media query below.
   Owner comps: scratch-tmp/desktop-2026-10-22/ (1-sidebar.png wide, 2-news.png narrower). Phone and tablet keep what they have. */
@media (min-width:768px){

  /* ---------------------------------------------------------------------------------------------- the rail
     Markup: .brand (wordmark) + .side-close (collapse), .cta (New deck), .nav > .nav-group (label + rows), the theme block,
     .side-utility-v22 (Search, Settings), .sidefoot. The groups, the theme dropdown and the gear are formed by the inline
     script after js/plinth-mobile-shell.js in dashboard.html. Rows are the same buttons as ever.
     Every selector below leads with "html body #side" because the older generations in dashboard.html fix the sidebar
     with !important; an id plus classes is what out-ranks them, and this sheet is last.

     WIDE (the 1-sidebar comp): each group is a bordered white card, hairlines between its rows; the current row is a pale
     green pill inside the card with a solid dark green bar on the card's left edge; Theme is a label over a full-width
     dropdown, then Search (with its Ctrl K chip) and Settings.
     NARROW (the 2-news comp, below 1500px wide or 900px tall): the cards lose their border, fill and dividers, the type
     and rows come down a step, the current row becomes a bordered green box with a thinner bar, the Ctrl K chip goes,
     and Search and Settings sit above Theme. */

  /* Wordmark and the collapse control share one row, above the full-width button. */
  html body #side{padding-bottom:22px!important}
  html body #side > *{flex-shrink:0}
  html body #side .brand{display:flex;align-items:center;height:46px!important;min-height:0!important;margin:0 0 12px!important;padding:0 2px;font-size:26px!important}
  html body #side .side-close{top:29px;right:18px;width:44px;height:44px;min-width:44px;border-radius:10px;
    border:1px solid var(--line-2);background:var(--card);color:var(--ink);box-shadow:none}
  html body #side .side-close:hover{background:var(--sig-bg);border-color:var(--sig);color:var(--sig)}
  html body #side .side-close svg{width:19px;height:19px}
  html body #side .cta{width:100%;min-height:44px!important;justify-content:center;gap:10px;border-radius:6px!important;
    font-size:15.5px!important;font-weight:600;letter-spacing:-.005em}

  /* ------------------------------------------------------------------------------------------ the three groups */
  html body #side .nav.simple-nav{display:block;margin-top:16px!important;padding:0;overflow:visible}
  html body #side .nav .nav-group + .nav-group{margin-top:16px}
  html body #side .nav .nav-group-t{margin:0 0 10px;padding:0 2px;font-size:11.5px;font-weight:500;line-height:1.2;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

  /* Owner ruling, 23 Oct 2026, from his two comps: the groups lose the card. No border round the group, no white
     fill, no hairline between the rows. The names and their icons sit straight on the sidebar, and the only thing
     drawn is the current row. His words: "these without borders, is nicer than this".
     This is a deliberate exception to the standing "borders and contrast run strong product-wide" rule, and only
     here: the sidebar carries no information in its edges, so the boxes were dividing a list that reads as a list
     without them. The NARROW layout below already drew it this way, so the two widths now agree. */
  html body #side .nav .nav-group-rows{overflow:hidden;border:0;border-radius:10px;background:transparent}
  html body #side .nav .nav-group .navrow{display:block;margin:0;padding:0}
  html body #side .nav .nav-group .navrow > button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:41px;
    margin:0;padding:0 16px;border:0;border-radius:0!important;outline:0!important;background:transparent;box-shadow:none;
    font-size:15px;font-weight:480;letter-spacing:-.005em;color:var(--ink);text-align:left}
  html body #side .nav .nav-group .navrow > button svg{position:relative;z-index:1;width:19px;height:19px;flex:none;color:var(--ink);opacity:.82}
  html body #side .nav .nav-group .navrow > button .nl{position:relative;z-index:1}
  html body #side .nav .nav-group .navrow > button:hover{background:color-mix(in srgb,var(--sig-bg) 50%,transparent)}
  html body #side .nav .nav-group .navrow > button:focus-visible{outline:2px solid var(--sig)!important;outline-offset:-3px}

  /* The current page: an inset pale green pill (::before), a solid dark green bar on the card's edge (::after), dark green label. */
  html body #side .nav .nav-group .navrow > button[aria-current="true"]{background:transparent!important;color:var(--sig)!important;
    font-weight:650;box-shadow:none!important}
  html body #side .nav .nav-group .navrow > button[aria-current="true"]::before{content:"";position:absolute;inset:4px 4px 4px 6px;
    border-radius:6px;background:var(--sig-bg)}
  html body #side .nav .nav-group .navrow > button[aria-current="true"]::after{content:"";position:absolute;left:0;top:0;bottom:0;
    width:4px;background:var(--sig)}
  html body #side .nav .nav-group .navrow > button[aria-current="true"] svg{color:var(--sig)!important;opacity:1}

  /* ------------------------------------------------------------------- Theme, then Search and Settings */
  html body #side .side-theme-v23{display:block;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-2)}
  html body #side .side-theme-v23 > span:not(.theme-pick){display:block;margin:0 0 9px;padding:0 4px;font-size:11.5px;font-weight:500;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  html body #side .side-theme-v23 .side-theme-grid-v23{display:none}
  html body #side .theme-pick{position:relative;display:block;width:100%}
  html body #side .theme-pick .side-theme-ico{position:absolute;left:13px;top:50%;width:19px;height:19px;margin-top:-9.5px;
    color:var(--ink);pointer-events:none}
  html body #side .theme-pick::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;
    border:solid var(--ink);border-width:0 1.6px 1.6px 0;transform:translateY(-75%) rotate(45deg);pointer-events:none}
  html body #side .theme-pick select{appearance:none;-webkit-appearance:none;display:block;width:100%;height:38px;margin:0;
    padding:0 34px 0 44px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink);
    font:inherit;font-size:14.5px;font-weight:480;cursor:pointer}
  html body #side .theme-pick select:hover{border-color:var(--ink-3)}
  html body #side .theme-pick select:focus-visible{outline:2px solid var(--sig);outline-offset:1px}

  html body #side .side-utility-v22{margin:18px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line-2)}
  html body #side .side-utility-v22 button{display:flex;align-items:center;gap:14px;width:100%;min-height:40px;margin:0;
    padding:0 4px 0 16px;border:0;border-radius:8px;background:transparent;box-shadow:none;
    font-size:15px;font-weight:480;color:var(--ink);text-align:left}
  html body #side .side-utility-v22 button:hover{background:color-mix(in srgb,var(--sig-bg) 50%,transparent)}
  html body #side .side-utility-v22 button svg{width:19px;height:19px;margin:0!important;flex:none;color:var(--ink);opacity:.82}
  html body #side .side-utility-v22 button[aria-current="true"]{background:var(--sig-bg)!important;color:var(--sig)!important;
    font-weight:650;outline:0!important;box-shadow:inset 4px 0 0 var(--sig)!important}
  html body #side .side-utility-v22 button[aria-current="true"] svg{color:var(--sig)!important;opacity:1}
  html body #side .side-utility-v22 button:focus-visible{outline:2px solid var(--sig)!important;outline-offset:1px}
  html body #side .side-utility-v22 kbd{margin-left:auto;padding:4px 9px;border:1px solid var(--line-2);border-radius:6px;
    background:transparent;font:inherit;font-size:12px;font-weight:450;line-height:1.2;color:var(--ink-3)}

  /* ------------------------------------------------------------------ a narrower window: the same rail, flatter */
  @media (max-width:1499px),(max-height:899px){
    html body #side .brand{height:40px!important;margin-bottom:10px!important;font-size:23px!important}
    html body #side .side-close{top:28px;width:32px;height:32px;min-width:32px;border-radius:8px}
    html body #side .side-close svg{width:16px;height:16px}
    html body #side .cta{min-height:38px!important;font-size:13.5px!important}
    html body #side .nav.simple-nav{margin-top:14px!important}
    html body #side .nav .nav-group + .nav-group{margin-top:12px}
    html body #side .nav .nav-group-t{margin-bottom:5px;font-size:10.5px;letter-spacing:.06em}

    /* No card: no border, no fill, no hairlines. The rows sit straight on the rail. */
    html body #side .nav .nav-group-rows{overflow:visible;border-color:transparent;border-radius:0;background:transparent}
    html body #side .nav .nav-group .navrow + .navrow{border-top-color:transparent}
    html body #side .nav .nav-group .navrow > button{min-height:34px;gap:11px;padding:0 10px;font-size:13.5px}
    html body #side .nav .nav-group .navrow > button svg{width:17px;height:17px}
    /* The current row: a bordered pale green box, a thinner bar on its left edge. */
    html body #side .nav .nav-group .navrow > button[aria-current="true"]::before{inset:0;border:1px solid color-mix(in srgb,var(--sig) 28%,transparent);
      border-radius:3px}
    html body #side .nav .nav-group .navrow > button[aria-current="true"]::after{width:3px}

    /* Search and Settings first, Theme under them; no Ctrl K chip. */
    html body #side .side-utility-v22{order:1;margin-top:14px;padding-top:10px}
    html body #side .side-utility-v22 button{min-height:34px;gap:11px;padding-left:10px;font-size:13.5px}
    html body #side .side-utility-v22 button svg{width:17px;height:17px}
    html body #side .side-utility-v22 kbd{display:none}
    html body #side .side-theme-v23{order:2;margin-top:10px;padding-top:10px}
    html body #side .side-theme-v23 > span:not(.theme-pick){margin-bottom:6px;font-size:12px;letter-spacing:0;text-transform:none}
    html body #side .theme-pick select{height:32px;padding-left:38px;font-size:13px}
    html body #side .theme-pick .side-theme-ico{left:11px;width:17px;height:17px;margin-top:-8.5px}
    html body #side .sidefoot{order:3}
  }
}