/* SharePi v2 — each person's look (look.js) and its editor, Customize
 * (customize.js), with its Sidebar section (railnav.js). A `data-look-*` choice on <html> re-points brand tokens
 * here; colours arrive as inline properties on <html>, with the tint mixed
 * into the surfaces by look.js. Loaded after the workspace sheets, so these win over
 * both themes. No choice set = exactly the ShareOS default. */

/* Text size scales every rem (type, spacing, columns), as browser zoom would:
 * the person's choice times an iPhone's or iPad's own Text Size (--look-ios,
 * look.js), capped at twice the default so the layout still fits. */
:root { font-size: min(200%, 100% * var(--look-text, 1) * var(--look-ios, 1)); }
:root[data-look-text="small"] { --look-text: 0.9375; }
:root[data-look-text="large"] { --look-text: 1.125; }
:root[data-look-text="larger"] { --look-text: 1.25; }
:root[data-look-text="largest"] { --look-text: 1.5; }

/* Spacing: brand.css's 0.25rem grid, multiplied. */
:root[data-look-density] {
  --sv-space-1: calc(0.25rem * var(--look-density));
  --sv-space-2: calc(0.5rem * var(--look-density));
  --sv-space-3: calc(0.75rem * var(--look-density));
  --sv-space-4: calc(1rem * var(--look-density));
  --sv-space-5: calc(1.25rem * var(--look-density));
  --sv-space-6: calc(1.5rem * var(--look-density));
  --sv-space-8: calc(2rem * var(--look-density));
}
:root[data-look-density="compact"] { --look-density: 0.75; }
:root[data-look-density="roomy"] { --look-density: 1.25; }

/* Corners: every other radius in the workspace sheets derives from this one. */
:root[data-look-corners="square"] { --sv-radius: 0px; }
:root[data-look-corners="round"] { --sv-radius: 14px; }

:root[data-look-font="system"] { --sv-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-look-font="serif"] { --sv-font-sans: ui-serif, Georgia, Cambria, "Times New Roman", serif; }
/* The wordmark is the logo, not text: it keeps Aeonik whatever the font. */
:root[data-look-font] .wordmark { font-family: "Aeonik Pro", Arial, sans-serif; }

/* ---------- customize.js ---------- */

/* Docked to the side over a clear backdrop: the app behind it is the preview. */
.look-dialog {
  margin: 0 0 0 auto;
  width: min(22rem, 100vw);
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  border: 0;
  border-left: var(--sv-hairline-w) solid var(--sv-hairline);
  box-shadow: var(--sv-shadow-lg);
}
.look-dialog:not([open]) { display: none; }
.look-dialog::backdrop { background: transparent; }
.look-head { display: flex; align-items: flex-start; gap: var(--sv-space-2); padding: var(--sv-space-4) var(--sv-space-3) var(--sv-space-3) var(--sv-space-4); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.look-titles { flex: 1; min-width: 0; }
.look-title { margin: 0; font-size: var(--ui-text); font-weight: 600; }
.look-sub { margin: 2px 0 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.look-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--sv-space-5); margin: 0; padding: var(--sv-space-4); }
.look-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.look-legend { margin-bottom: var(--sv-space-2); padding: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 500; }

/* Colour swatches: a radio each, plus a well that takes any colour. */
.look-swatches { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.look-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
  cursor: pointer;
}
.look-well { background: conic-gradient(#ef4444, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #ef4444); }
.look-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.look-swatch:has(input:checked), .look-well.is-current { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2px var(--sv-surface-raised), 0 0 0 4px var(--sv-ink); }
.look-swatch:has(input:focus-visible) { outline: 2px solid var(--sv-ink); outline-offset: 5px; }

/* Every other choice: a segmented row of radios, like the profile menu's theme.
 * Equal widths; at a very large text size the row wraps instead of cutting a label. */
.look-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--sv-surface-sunken); border-radius: var(--sv-radius); }
.look-option {
  position: relative;
  flex: 1 1 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--sv-space-1);
  border-radius: calc(var(--sv-radius) * 0.75);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
  cursor: pointer;
}
.look-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.look-option:hover { background: var(--ws-hover); }
.look-option:has(input:checked) { background: var(--sv-surface-raised); color: var(--sv-ink); font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.look-option:has(input:focus-visible) { outline: 2px solid var(--sv-ink); outline-offset: 1px; }

/* Sidebar: a note and the way to railedit.js's edit mode on the sidebar itself. */
.look-note { margin: 0 0 var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); line-height: 1.45; }
.look-sidebar-edit { margin-left: calc(-1 * var(--sv-space-2)); }

.look-foot { display: flex; justify-content: space-between; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }

/* A phone keeps the app in sight above a bottom sheet. */
@media (max-width: 760px) {
  .look-dialog {
    margin: auto 0 0;
    width: 100vw;
    height: auto;
    max-height: 70dvh;
    border-left: 0;
    border-top: var(--sv-hairline-w) solid var(--sv-hairline);
    border-radius: calc(var(--sv-radius) * 1.5) calc(var(--sv-radius) * 1.5) 0 0;
  }
}