/* Shape themes: the corners and edges of Dew's own parts, picked in Settings → Appearance → Shape
   (js/looks.js sets data-shape on <html>; unset is Soft, the shape Dew came with).
     slant   parallelograms: buttons and the dock lean, windows have two corners cut off
     square  straight edges and sharp corners everywhere
     round   round and polished: pills, deep round corners and a gloss on the top edge
   Colours stay with tokens.css and the dark slider, so every shape works light, dark, black or red.
   Things that are round because of what they mean stay round in every shape: the Dew ball, the
   recording dots, the rings that show a click, the weather card's drawings and the capture tool. */

/* ---- slant and square: no rounded corners ---- */
html:is([data-shape="slant"], [data-shape="square"]) { --radius: 0px; }
html:is([data-shape="slant"], [data-shape="square"]) :where(:not(#assistant, #assistant *, #weather, #weather *, #wx-edge, #wx-edge *,
    .cap, .cap *, .fb-recdot, .fb-click, .hub-dot)),
html:is([data-shape="slant"], [data-shape="square"]) :where(:not(#assistant, #assistant *, #weather, #weather *, #wx-edge, #wx-edge *, .cap, .cap *))::before,
html:is([data-shape="slant"], [data-shape="square"]) :where(:not(#assistant, #assistant *, #weather, #weather *, #wx-edge, #wx-edge *, .cap, .cap *))::after {
  border-radius: 0 !important;
}

/* ---- slant: buttons, fields and the switches lean like parallelograms ---- */
html[data-shape="slant"] { --slant: 9px; }
html[data-shape="slant"] :is(.solid, .ghost, .seg, .seg button, .search-pair, .set-row select, .tile, .nx-chip, .nx-add, input.switch),
html[data-shape="slant"] input.switch::before {
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
html[data-shape="slant"] input.switch, html[data-shape="slant"] input.switch::before { --slant: 5px; }
/* a lean cuts off the side borders, so outlined parts are filled a little instead */
html[data-shape="slant"] :is(.ghost, .seg, .search-pair, .set-row select) { border-color: transparent; background-color: rgba(var(--tint), .08); }
html[data-shape="slant"] .ghost:hover { background-color: rgba(var(--tint), .14); }
html[data-shape="slant"] .search-pair:focus-within { box-shadow: inset 0 -2px 0 var(--accent-text); }
/* the focus ring drawn inside, where the lean doesn't cut it */
html[data-shape="slant"] :is(.solid, .ghost, .seg button, .tile, .nx-chip, .nx-add, input.switch):focus-visible { outline-offset: -3px; }
html[data-shape="slant"] .tile { padding-inline: var(--slant); }
/* windows and cards: the top-left and bottom-right corners cut off, along the same lean, with the rim
   drawn along the cut */
html[data-shape="slant"] :is(.panel, .lp-card, .hub-fix-card, #results) {
  --cut: 16px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background-image:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--rim) calc(50% - .5px), var(--rim) calc(50% + .5px), transparent calc(50% + 1px)),
    linear-gradient(135deg, transparent calc(50% - 1px), var(--rim) calc(50% - .5px), var(--rim) calc(50% + .5px), transparent calc(50% + 1px));
  background-position: top left, bottom right;
  background-size: var(--cut) var(--cut);
  background-repeat: no-repeat;
}
html[data-shape="slant"] #results { --cut: 10px; }
/* the dock leans too: its glass is drawn leaning behind it, so the ball and the search results that
   reach out of it aren't cut */
html[data-shape="slant"] #dock { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; }
html[data-shape="slant"] #dock::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--dock-bg); border: 1px solid var(--rim); box-shadow: var(--sheen);
  backdrop-filter: blur(14px); transform: skewX(-16deg);
}
html[data-shape="slant"][data-transparency="off"] #dock::before { backdrop-filter: none; }

/* ---- round and polished ---- */
html[data-shape="round"] {
  --radius: 28px;
  --gloss: rgba(255, 255, 255, .22);         /* the light along a top edge */
  --gloss-soft: rgba(255, 255, 255, .05);    /* the same light, spread over a header or the dock */
}
html[data-shape="round"][data-theme="light"] { --gloss: rgba(255, 255, 255, .8); --gloss-soft: rgba(255, 255, 255, .45); }
html[data-shape="round"][data-contrast="high"] { --gloss: transparent; --gloss-soft: transparent; }
html[data-shape="round"] :is(.solid, .ghost, .seg, .seg button, .close, .search-pair, .set-row select, .nx-chip, .nx-add,
    .nx-tools button, .nx-model button, .tree-head button, #crumbs button, #note-delete, input.switch) { border-radius: 999px; }
html[data-shape="round"] :is(.tile, .entry, .lp-card, .hub-fix-card, #results, .nx-viewer, .nx-msg, .placeholder input, #lp-q, #nx-input) { border-radius: 22px; }
html[data-shape="round"] :is(.entry .thumb, #results li, .lp-list button, .tree-name, .set-row) { border-radius: 16px; }
html[data-shape="round"] .solid {
  background: linear-gradient(180deg, var(--gloss), transparent 55%), var(--solid-bg);
  box-shadow: inset 0 1px 0 var(--gloss), 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
html[data-shape="round"] .seg button.on {
  background: linear-gradient(180deg, var(--gloss), transparent 60%), var(--accent);
  box-shadow: inset 0 1px 0 var(--gloss), 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
html[data-shape="round"] :is(.ghost, .seg, .close) {
  background-image: linear-gradient(180deg, rgba(var(--tint), .07), rgba(var(--tint), .01));
  box-shadow: inset 0 1px 0 var(--gloss-soft);
}
html[data-shape="round"] input.switch::before { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 0 var(--gloss); }
html[data-shape="round"] .panel { box-shadow: var(--sheen), inset 0 1px 0 var(--gloss), 0 30px 80px var(--shadow); }
html[data-shape="round"] .panel > header { background: linear-gradient(180deg, var(--gloss-soft), transparent); }
html[data-shape="round"] #dock {
  background-image: linear-gradient(180deg, var(--gloss-soft), transparent 70%);
  box-shadow: var(--sheen), inset 0 1px 0 var(--gloss), 0 10px 30px var(--shadow);
}

/* ---- the Shape choice in Settings shows each shape in a small mark ---- */
.seg.shape-pick button::before {
  content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 1.5px solid currentColor; border-radius: 3px !important;
}
.seg.shape-pick button[data-value="slant"]::before { border-radius: 0 !important; transform: skewX(-18deg); }
.seg.shape-pick button[data-value="square"]::before { border-radius: 0 !important; }
.seg.shape-pick button[data-value="round"]::before { border-radius: 999px !important; }