/* 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/. Phone and tablet keep what they have. */
@media (min-width:768px){
 /* This sheet is linked into Redesigner's shadow root by js/dashboard-redesigner.js, which also sets [data-desk] on .rd
    while the window is a desktop one. The shell sheet (redesigner.css) is heavy with !important, so these match it. */

 /* the head: a bare house, the title and a line under it; the renders counter, a rule, then Add */
 .rd[data-desk] .heading{align-items:center!important;gap:24px!important;padding:40px 0 28px!important}
 .rd[data-desk] .heading-copy:has(>.d-tile){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
 .rd[data-desk] .heading-copy>.d-tile{grid-column:1;grid-row:1;display:grid;place-items:center;width:40px;height:40px;color:var(--h1-ink,var(--sig))}
 .rd[data-desk] .heading-copy>.d-tile .d-ico{width:40px;height:40px;stroke-width:1.6}
 .rd[data-desk] .heading-copy:has(>.d-tile)>h1{grid-column:2;grid-row:1;align-self:end;margin:0!important;font-size:35px!important;line-height:1.1!important}
 .rd[data-desk] .heading-copy>.d-sub{grid-column:2;grid-row:2;align-self:start;margin:6px 0 0!important;font-size:17px!important;font-weight:400;line-height:1.3;color:var(--ink-2)!important}
 .rd[data-desk] .head-actions{align-items:center!important;gap:24px!important}
 .rd[data-desk] .head-actions .usage{display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;margin:0!important;padding:4px 24px 4px 0!important;
  border-right:1px solid var(--line-2)!important;font-size:16.5px!important;font-weight:500;line-height:1.2;color:var(--ink)!important}
 .rd[data-desk] .head-actions .usage:empty{display:none!important}
 .rd[data-desk] .head-actions .usage small{display:block!important;margin:0!important;font-size:14.5px!important;font-weight:400;line-height:1.2;color:var(--ink-3)!important}
 .rd[data-desk] .head-actions .primary{display:inline-flex!important;align-items:center;gap:10px;min-height:51px!important;padding:0 24px!important;border-radius:11px!important;font-size:17px!important;font-weight:500}
 .rd[data-desk] .head-actions .primary .p71-icon{width:22px;height:22px}

 /* the library: one white card, soft and round, that holds the tabs, the tools, the shelf and the footer */
 .rd[data-desk] .library-card{display:flex!important;flex-direction:column;min-height:max(520px,calc(100dvh - 215px))!important;margin:0!important;padding:0 20px 14px!important;
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)!important;border-radius:22px!important;overflow:visible!important}

 /* the tabs: a row with a rule under it; the open tab has an icon, a pale green fill and a green line */
 .rd[data-desk] .workspace-tabs{display:flex!important;align-items:flex-end;gap:14px!important;margin:0 0 20px!important;padding:8px 0 0!important;
  border:0!important;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
 .rd[data-desk] .workspace-tabs>button{position:relative;display:inline-flex!important;align-items:center;gap:12px;min-height:52px!important;padding:0 16px!important;
  border:0!important;border-radius:10px 10px 0 0!important;background:transparent!important;box-shadow:none!important;color:var(--ink-2)!important;font-size:17.5px!important;font-weight:400;line-height:1;white-space:nowrap}
 .rd[data-desk] .workspace-tabs>button:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)!important;color:var(--ink)!important}
 .rd[data-desk] .workspace-tabs>button[aria-current=page]{background:color-mix(in srgb,var(--sig) 9%,transparent)!important;color:var(--h1-ink,var(--ink))!important;font-weight:500}
 .rd[data-desk] .workspace-tabs>button::after{content:none!important}
 .rd[data-desk] .workspace-tabs>button[aria-current=page]::after{content:''!important;position:absolute;left:6px;right:6px;bottom:0;top:auto;height:3px;border-radius:3px;background:var(--sig)!important}
 .rd[data-desk] .workspace-tabs>button .d-ico{width:25px;height:25px;flex:none;stroke-width:1.6}
 .rd[data-desk] .workspace-tabs>button .d-n{margin-left:-6px;font-weight:inherit}
 .rd[data-desk] .workspace-tabs .backup{margin:0 0 6px auto!important;padding:0!important;border:0!important;align-self:center}
 .rd[data-desk] .workspace-tabs .backup>summary{display:grid;place-items:center;width:40px;height:40px;border:1px solid transparent;border-radius:10px;background:transparent}
 .rd[data-desk] .workspace-tabs .backup>summary:hover,.rd[data-desk] .workspace-tabs .backup[open]>summary{border-color:var(--line-2);background:var(--card,#fff)}

 /* search, Filters and the sort */
 .rd[data-desk] .tools{display:flex!important;align-items:center;gap:14px!important;margin:0!important;padding:0 0 24px!important;border:0!important;background:transparent!important}
 .rd[data-desk] .tools .search{flex:1 1 auto;display:flex;align-items:center;gap:14px;height:51px;max-width:none!important;padding:0 20px!important;
  border:1px solid var(--line-2)!important;border-radius:12px!important;background:var(--card,#fff)!important}
 .rd[data-desk] .tools .search .p71-icon{width:22px;height:22px}
 .rd[data-desk] .tools .search input{height:auto!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;font-size:16.5px!important}
 .rd[data-desk] .tools .filter-menu>summary{min-height:51px!important;padding:0 22px!important;gap:12px!important;border:1px solid var(--line-2)!important;border-radius:12px!important;background:var(--card,#fff)!important;font-size:16px!important;font-weight:500;color:var(--ink)}
 .rd[data-desk] .tools .filter-menu>summary .p71-icon{width:22px;height:22px}
 .rd[data-desk] .tools .sort-field{position:relative;flex:none;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
 .rd[data-desk] .tools .sort-field>.d-sort{position:absolute;left:16px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--ink);pointer-events:none}
 .rd[data-desk] .tools .sort-field select{appearance:none;-webkit-appearance:none;height:51px!important;min-height:51px!important;min-width:205px;padding:0 46px 0 52px!important;
  border:1px solid var(--line-2)!important;border-radius:12px!important;font-size:16px!important;font-weight:500;color:var(--ink);
  background:var(--card,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23151817' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/17px!important}
 .rd[data-desk] .tools .sort-field.property-field select{padding-left:18px!important}
 .rd[data-desk] .tools .filter-pop{top:calc(100% + 8px)!important;min-width:232px;padding:14px!important;border:1px solid var(--line-2)!important;border-radius:12px!important;background:var(--card,#fff)!important;box-shadow:0 12px 32px rgba(20,32,26,.16)!important}
 .rd[data-desk] .tools .filter-pop select{height:42px;border:1px solid var(--line-2);border-radius:10px;background-color:var(--card,#fff)}

 /* the bar that appears when something is ticked */
 .rd[data-desk] .selection-bar{margin:0 0 18px!important;padding:10px 14px!important;border:1px solid var(--line-2)!important;border-radius:12px!important;background:color-mix(in srgb,var(--sig) 8%,var(--card,#fff))!important}

 /* the shelf: property cards on the card */
 .rd[data-desk] .library-panel{flex:1 1 auto;min-height:0!important;padding:0 0 24px!important}
 .rd[data-desk] .library-grid{grid-template-columns:repeat(auto-fill,minmax(300px,356px))!important;justify-content:start;gap:20px!important}
 .rd[data-desk] .tile-open{overflow:hidden;border-radius:16px!important;box-shadow:none!important}
 .rd[data-desk] .tile-open:hover{border-color:color-mix(in srgb,var(--sig) 45%,var(--line-2))!important;box-shadow:0 8px 24px rgba(20,32,26,.09)!important}
 .rd[data-desk] .tile-cover{height:228px!important}
 .rd[data-desk] .tile-caption{padding:18px 20px 20px!important}
 .rd[data-desk] .folder-tile .tile-caption{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
 .rd[data-desk] .folder-tile .tile-caption>.d-folder{grid-row:1/span 2;width:26px;height:26px;color:var(--ink);stroke-width:1.6}
 .rd[data-desk] .tile-caption h2{font-size:18px!important;font-weight:500!important;line-height:1.25}
 .rd[data-desk] .tile-caption p{margin-top:4px!important;font-size:15px!important;color:var(--ink-3)!important}
 .rd[data-desk] .folder-count{bottom:15px!important;left:16px!important;padding:6px 12px!important;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)!important;border-radius:10px!important;
  background:var(--card,#fff)!important;color:var(--ink)!important;font-size:14.5px!important;font-weight:500;line-height:1.2}
 .rd[data-desk] .tile-controls{top:16px!important;left:16px!important;right:14px!important}
 .rd[data-desk] .tile-controls>label{width:28px!important;height:28px!important;border:1px solid var(--line-2)!important;border-radius:8px!important;background:var(--card,#fff)!important}
 .rd[data-desk] .tile-controls .menu>summary{display:grid;place-items:center;width:36px;height:36px;min-width:0;padding:0;border:1px solid var(--line-2);border-radius:9px;background:var(--card,#fff);color:var(--ink);line-height:1}

 /* the three-dot menu: an icon on each action, a rule before the destructive one */
 .rd[data-desk] .tile-controls .menu>div{min-width:224px;white-space:nowrap;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:14px;background:var(--card,#fff);box-shadow:0 10px 30px rgba(20,32,26,.14)}
 .rd[data-desk] .tile-controls .menu>div>button{display:flex!important;align-items:center;gap:18px;width:100%;min-height:44px;padding:0 6px!important;border:0!important;border-radius:8px;background:transparent;font-size:16px;font-weight:400;text-align:left;color:var(--ink)}
 .rd[data-desk] .tile-controls .menu>div>button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
 .rd[data-desk] .tile-controls .menu>div>button .d-ico{width:22px;height:22px;flex:none;color:var(--ink);stroke-width:1.6}
 .rd[data-desk] .tile-controls .menu>div>button[data-action=delete]{position:relative;margin-top:11px}
 .rd[data-desk] .tile-controls .menu>div>button[data-action=delete]::before{content:'';position:absolute;left:0;right:0;top:-6px;height:1px;background:color-mix(in srgb,var(--ink) 14%,transparent)}

 /* the footer bar: the count, the pager beside it, the quiet line at the right, on a tinted band */
 .rd[data-desk] .library-footer{display:flex!important;align-items:center;gap:16px!important;margin:0!important;padding:14px 24px!important;
  border:0!important;border-radius:0;background:color-mix(in srgb,var(--ink) 4%,transparent)!important;font-size:15.5px!important}
 .rd[data-desk] .library-footer>span:first-child{margin-right:6px;font-size:15.5px;font-weight:400;color:var(--ink)}
 .rd[data-desk] .library-footer>div{justify-content:flex-start;gap:4px}
 .rd[data-desk] .library-footer>div>span{min-width:54px;text-align:center;font-size:16px;color:var(--ink)}
 .rd[data-desk] .library-footer>div button{position:relative;display:block;width:49px;height:49px;min-width:0;min-height:0;padding:0;border:1px solid var(--line-2);border-radius:12px;background:var(--card,#fff);color:var(--ink);font-size:0;line-height:0}
 .rd[data-desk] .library-footer>div button::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid currentColor;border-width:0 0 1.8px 1.8px;transform:translate(-30%,-50%) rotate(45deg)}
 .rd[data-desk] .library-footer>div button[data-action=next]::before{transform:translate(-70%,-50%) rotate(-135deg)}
 .rd[data-desk] .library-footer>div button:disabled{opacity:.45;cursor:default}
 .rd[data-desk] .library-footer>small{order:0;flex:1 1 auto;margin-left:auto;text-align:right;font-size:15px;color:var(--ink-3)}
}