/* Nordlys product polish
   ----------------------
   This final layer deliberately owns composition and finish while the files
   before it continue to own behaviour. Keeping the pass isolated makes the
   visual direction easy to review and prevents a redesign from disturbing the
   extension's storage, accessibility, or interaction contracts. */

:root {
  --nl-polish-surface: color-mix(in srgb, var(--nl-surface-card) 72%, transparent);
  --nl-polish-surface-solid: color-mix(in srgb, var(--nl-surface-card) 94%, var(--nl-canvas));
  --nl-polish-hairline: color-mix(in srgb, var(--nl-text-primary) 10%, transparent);
  --nl-polish-hairline-hover: color-mix(in srgb, var(--nl-text-primary) 18%, transparent);
  --nl-polish-accent-soft: color-mix(in srgb, var(--nl-accent) 13%, transparent);
}

/* Canvas composition */
#page {
  justify-content: flex-start;
  gap: 24px;
  padding: clamp(64px, 9vh, 104px) 24px 72px;
}

#hero {
  gap: 5px;
}

#clock {
  min-width: 6ch;
  font-size: clamp(68px, 8.5vw, 96px);
  font-weight: 300;
  line-height: .92;
  letter-spacing: var(--nl-track-tight);
  text-shadow: var(--nl-shadow-2);
}

/* Quieter than the digits, never below the 3:1 large text needs. At .48 the
   colon measured 2.6 to 2.9 to one in fourteen of the themes, and .66 still
   gave out over a bright thread of Silk. */
#clock .colon:not(.sc) {
  display: inline-block;
  margin-inline: .025em;
  opacity: .72;
  transform: translateY(-.045em);
}

/* A sentence, set as one: 13px, mixed case, no tracking, and the secondary
   tier at full strength. It was 11px — a size the scale keeps for uppercase
   group labels — tracked wide like a label and thinned to 88%, sitting
   straight on the sky, where it measured 3.2 to one in Solarized Light. */
#date {
  margin-top: 8px;
  font-size: var(--nl-text-sm);
  font-weight: 600;
  letter-spacing: var(--nl-track-none);
  text-transform: none;
  color: var(--nl-text-secondary);
}

/* Secondary, not tertiary. The greeting sits straight on the sky, where a
   bright curtain or a halo can pass behind it, and the tertiary tier measured
   3.4:1 there in the default theme. Light themes already used this tier. */
#greet {
  font-size: var(--nl-text-md);
  color: var(--nl-text-secondary);
}

/* Search is the primary action, not another glass card. */
#searchwrap {
  width: min(88vw, 620px);
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
}

#search {
  height: 56px;
  gap: 10px;
  padding-inline: 14px;
  border-radius: var(--nl-radius-lg);
  border-color: var(--nl-polish-hairline);
  /* --search-solid, like a folder's --card-solid, is raised over a bright
     wallpaper until the field's own words read. */
  background: color-mix(in srgb, var(--nl-surface-card-deep) max(74%, calc(var(--search-solid, 0) * 100%)), transparent);
  box-shadow: var(--nl-shadow-2);
  min-width: 0;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

#search:hover {
  border-color: var(--nl-polish-hairline-hover);
  background: color-mix(in srgb, var(--nl-surface-card-deep) 82%, transparent);
}

#search:focus-within,
body.searching #search {
  border-color: color-mix(in srgb, var(--nl-accent) 72%, var(--nl-border));
  background: var(--nl-polish-surface-solid);
  box-shadow: var(--nl-shadow-3), 0 0 0 3px var(--nl-polish-accent-soft);
}

#search-icon {
  width: 32px;
  height: 40px;
}

#search-icon svg {
  width: 18px;
  height: 18px;
  opacity: .82;
}

#q {
  font-size: var(--nl-text-md);
  min-width: 0;
}

/* A key, and solid like one. A tint over the glass let the sky through, and
   with blur off — reduced motion turns it off — a contour line could run
   straight through the "/" under it. */
#search kbd {
  min-width: 24px;
  padding: 5px 6px;
  text-align: center;
  color: var(--nl-text-secondary);
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-text-primary) 4%, var(--nl-surface-card-deep));
}

#sugg {
  top: calc(100% + 10px);
  padding: 6px;
  border-radius: var(--nl-radius-lg);
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-surface-card-deep) 96%, transparent);
  box-shadow: var(--nl-shadow-3);
}

#sugg > div {
  min-height: 46px;
  padding: 8px 12px;
  border-radius: var(--nl-radius-sm);
}

#sugg div.sel,
#sugg div:hover {
  background: var(--nl-polish-accent-soft);
}

/* Bookmark board. In Natural each folder is as tall as its own tiles:
   stretched to the tallest in its row, a two-bookmark folder carried a hundred
   and twenty pixels of empty glass under its tiles, which reads as something
   missing. Fitted asks for the matching heights on purpose, and gets them. */
#board {
  width: min(94vw, var(--board-max, 1400px));
  --board-gap: var(--board-gap-set, calc(var(--grid-gap, 12px) + 2px));
}

.card {
  gap: 14px;
  padding: 14px 16px 16px;
  /* The Corner radius setting. A fixed radius here once drew over it, so the
     slider moved and no folder did. */
  border-radius: var(--card-radius, var(--nl-radius-lg));
  border-color: var(--nl-polish-hairline);
  /* The glass level reaches the tint as well as the blur. This used fixed 52%
     and 64%, so "None" took the blur away and left the same see-through card:
     frosted is 52/64 at the default opacity of .7, and opacity 1 is solid. */
  /* --card-solid is set on a folder over a wallpaper whose patch of the
     picture needs more glass for its words to read (measureWallpaper). */
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--nl-surface-card) max(calc((var(--glass-opacity, .7) - .7) * 160% + 52%), calc(var(--card-solid, 0) * 100%)), transparent),
    color-mix(in srgb, var(--nl-surface-card-deep) max(calc((var(--glass-opacity, .7) - .7) * 120% + 64%), calc(var(--card-solid, 0) * 100%)), transparent)
  );
  box-shadow: var(--nl-shadow-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate, 122%));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate, 122%));
}

.card:hover {
  border-color: var(--nl-polish-hairline-hover);
  box-shadow: var(--nl-shadow-1);
}

.cat {
  min-height: 28px;
  gap: 9px;
  padding-inline: 4px 0;
}

.cat s {
  width: 5px;
  height: 5px;
  box-shadow: none;
}

.cat b {
  font-size: var(--nl-text-xs);
  letter-spacing: var(--nl-track-none);
  /* A folder's name is its heading: the ink, above the tier its tiles use.
     In the secondary tier it measured 3.0 to one over frost at full intensity. */
  color: var(--nl-text-primary);
  text-transform: none;
}

.cat i {
  display: none;
}

/* The Spacing setting sets --grid-gap. A fixed gap here once put the slider
   out of reach, so it moved and nothing on the board did. */
.grid {
  gap: var(--grid-gap, 12px) calc(var(--grid-gap, 12px) - 2px);
}

.tile {
  gap: 8px;
}

.box {
  border-radius: var(--nl-radius-md);
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-surface-card-deep) 56%, transparent);
  box-shadow: var(--nl-shadow-1);
  transition: transform var(--nl-transition-control), box-shadow var(--nl-transition-control), border-color var(--nl-transition-fast), background-color var(--nl-transition-fast);
}

.tile:hover .box,
.tile:focus-visible .box,
body.hover-lift .tile:hover .box,
body.hover-scale .tile:hover .box,
body.hover-glow .tile:hover .box {
  border-color: color-mix(in srgb, var(--icon-accent, var(--nl-accent)) 40%, var(--nl-polish-hairline));
  background: color-mix(in srgb, var(--nl-surface-elevated) 72%, transparent);
  box-shadow: var(--nl-shadow-2), 0 0 0 3px color-mix(in srgb, var(--icon-accent, var(--nl-accent)) 9%, transparent);
  transform: translateY(-2px);
}

/* A tile's name is the one thing on the board a person reads to choose, so it
   takes the secondary tier. Tertiary measured 3.6:1 on paper and rendered at
   2.7:1, because a face this small never reaches its own colour; the stronger
   tier fixes that without a heavier weight, which would widen every name —
   at 500, "Kleinanzeigen" no longer fit its tile. */
.lbl {
  font-size: var(--nl-text-xs);
  font-weight: 450;
  color: var(--nl-text-secondary);
}

.tile:hover .lbl,
.tile:focus-visible .lbl {
  color: var(--nl-text-primary);
}

#gear {
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--nl-radius-md);
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-surface-card-deep) 76%, transparent);
  color: var(--nl-text-secondary);
  box-shadow: var(--nl-shadow-2);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

#gear:hover {
  color: var(--nl-text-primary);
  border-color: color-mix(in srgb, var(--nl-accent) 44%, var(--nl-border));
  background: var(--nl-polish-surface-solid);
  box-shadow: var(--nl-shadow-2), 0 0 0 3px var(--nl-polish-accent-soft);
}

/* Settings becomes a composed workspace: a calm rail beside one readable
   content column. The background is intentionally opaque enough that custom
   wallpapers cannot compromise control contrast. */
#cfg {
  background: color-mix(in srgb, var(--nl-surface-card-deep) 98%, var(--nl-canvas));
  border-left-color: var(--nl-polish-hairline);
}

.chead {
  min-height: 72px;
  padding: 14px 20px;
  border-bottom-color: var(--nl-polish-hairline);
  background: transparent;
}

.chead b {
  font-family: var(--font-display);
  font-size: var(--nl-text-xl);
  font-weight: 600;
  letter-spacing: var(--nl-track-tight);
}

#cfgx {
  border-radius: var(--nl-radius-sm);
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-text-primary) 4%, transparent);
}

.settings-layout {
  grid-template-columns: 176px minmax(0, 1fr);
}

.ctabs {
  gap: 20px;
  padding: 20px 12px;
  border-right-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-canvas) 22%, transparent);
}

.settings-nav-group {
  gap: 5px;
}

.settings-nav-label {
  padding: 0 12px 6px;
  font-size: var(--nl-text-2xs);
  letter-spacing: var(--nl-track-none);
  color: var(--nl-text-secondary);
  text-transform: none;
}

.ctab {
  min-height: 42px;
  padding-inline: 12px;
  border-radius: var(--nl-radius-sm);
  color: var(--nl-text-secondary);
}

.ctab:hover {
  color: var(--nl-text-primary);
  background: color-mix(in srgb, var(--nl-text-primary) 5%, transparent);
}

.ctab.active {
  color: var(--nl-text-primary);
  background: var(--nl-polish-accent-soft);
}

.ctab.active::before {
  inset-block: 10px;
  width: 2px;
}

.cbody {
  gap: 24px;
  padding: 24px 28px 40px;
  scrollbar-gutter: stable;
}

.csec {
  gap: 18px;
}

.csec h3 {
  margin-top: 8px;
  color: var(--nl-text-secondary);
  font-size: var(--nl-text-sm);
}

.csec h3::after {
  display: none;
}

.settings-group-label,
.ctx-header,
.nl-select-group {
  letter-spacing: var(--nl-track-none);
  text-transform: none;
}

.color-mode-segmented {
  padding: 4px;
  border-color: var(--nl-polish-hairline);
  border-radius: var(--nl-radius-md);
  background: color-mix(in srgb, var(--nl-canvas) 34%, transparent);
}

.mode-btn {
  border-radius: var(--nl-radius-sm);
}

.mode-btn.active {
  color: var(--nl-text-primary);
  background: color-mix(in srgb, var(--nl-accent) 20%, var(--nl-surface-elevated));
  box-shadow: var(--nl-shadow-1);
}

.theme-grid {
  gap: 10px;
}

.theme-card {
  min-height: 94px;
  padding: 10px;
  border-color: var(--nl-polish-hairline);
  border-radius: var(--nl-radius-md);
  background: color-mix(in srgb, var(--nl-surface-card) 42%, transparent);
}

.theme-card:hover {
  border-color: var(--nl-polish-hairline-hover);
  background: color-mix(in srgb, var(--nl-surface-card) 68%, transparent);
}

.theme-card.active,
.theme-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--nl-accent) 72%, var(--nl-border));
  background: var(--nl-polish-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-accent) 10%, transparent);
}

.theme-preview {
  border-radius: var(--nl-radius-sm);
}

.card-customizer-card,
.custom-theme-tuning-card,
.advanced-settings,
.bookmark-folder-accordion {
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-surface-card) 46%, transparent);
  box-shadow: none;
}

.setting-row {
  min-height: 60px;
  border-color: color-mix(in srgb, var(--nl-border) 64%, transparent);
}

.ipt,
.nl-select,
#cfg textarea {
  border-color: var(--nl-polish-hairline);
  background: color-mix(in srgb, var(--nl-canvas) 46%, transparent);
  color: var(--nl-text-primary);
}

.ipt:focus,
.nl-select:focus-visible,
#cfg textarea:focus {
  border-color: var(--nl-accent);
  background: var(--nl-polish-surface-solid);
  box-shadow: 0 0 0 3px var(--nl-polish-accent-soft);
}

/* Dialogs, menus and toasts share the same final level of elevation. */
:where(.quick-modal, .confirm-modal, .icon-picker-modal, .ctx-menu, .nl-select-popover) {
  border-color: var(--nl-polish-hairline);
  background: var(--nl-polish-surface-solid);
  box-shadow: var(--nl-shadow-3);
}

@media (max-height: 820px) {
  #page {
    gap: 18px;
    padding-top: 28px;
    padding-bottom: 40px;
  }

  #clock {
    font-size: clamp(58px, 10vh, 76px);
  }

  #searchwrap {
    margin-top: 4px;
  }
}

@media (max-width: 759px) {
  /* Narrower than this the clock reaches across under the One page fit
     switch (and the gear, on a phone), so the band above it holds them. */
  #page {
    gap: 20px;
    padding: 64px 14px 76px;
  }

  #clock {
    min-width: 0;
    font-size: clamp(58px, 20vw, 76px);
  }

  #searchwrap {
    width: min(92vw, 620px);
  }

  #board {
    width: 100%;
  }

  .card {
    padding-inline: 14px;
  }

  .settings-layout {
    display: flex;
  }

  .ctabs {
    gap: 8px;
    padding: 8px 14px 10px;
    background: transparent;
  }

  .cbody {
    padding: 20px 16px 32px;
  }
}

@media (max-width: 420px) {
  #page {
    padding-inline: 10px;
  }

  #search {
    height: 52px;
  }

  #gear {
    right: 14px;
    bottom: 14px;
  }

  .fit-toggle {
    right: 66px;
    max-width: calc(100% - 78px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #clock .colon {
    transform: none;
  }
}

/* Smooth corners: the continuous curve of an app icon rather than a quarter
   circle. A squircle of the same radius reads less round, so the radius is
   taken further to keep the size the slider promised. Browsers without
   corner-shape keep plain round corners at the larger radius. */
html[data-corners="smooth"] {
  --card-radius-smooth: calc(var(--card-radius, 18px) * 1.6);
}
html[data-corners="smooth"] :is(.card, .dash-card, .dash-ghost, .dash-add, .dash-pill, #search, .glass-context-menu, .dash-dialog, .tile .box) {
  corner-shape: squircle;
}
html[data-corners="smooth"] :is(.card, .dash-card, .dash-ghost) {
  border-radius: var(--card-radius-smooth);
}