/* Preview-only styles. Each direction shares the real search and form links. */
.designs {
  --toolbar-height: 64px;
  min-height: 100svh;
  background: #efefed;
  color: #202221;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.designs *, .designs *::before, .designs *::after { box-sizing: border-box; }
.designs a { text-decoration: none; text-underline-offset: 5px; }
.designs a:focus-visible, .designs button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.designs [hidden] { display: none !important; }
.designs__toolbar {
  display: flex;
  min-height: var(--toolbar-height);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 32px;
  background: #fff;
  border-bottom: 1px solid #e8e8e5;
  font-size: 14px;
}
.designs__toolbar a { color: #636663; }
.designs__toolbar a:hover, .designs__toolbar a[aria-current] { color: #171918; }
.designs__back, .designs__current { flex: 1; }
.designs__current { text-align: right; }
.designs__switcher { display: flex; gap: 6px; }
.designs__switcher a { display: flex; align-items: center; gap: 9px; padding: 12px 16px; }
.designs__switcher a[aria-current] { background: #f1f2ef; border-radius: 5px; }
.designs__swatch { width: 11px; height: 11px; border-radius: 50%; }
.designs__swatch--index { background: #b37955; }
.designs__swatch--clear { background: #4663e8; }
.designs__swatch--slate { background: #293347; }
.designs__swatch--graphite { background: #5d5b55; }
.designs__swatch--forest { background: #557f66; }
.designs__swatch--chalk { background: #4965bc; }
.designs__swatch--sand { background: #ac7f55; }
.designs__swatch--mist { background: #72a594; }
.designs--canvas { --toolbar-height: 0px; }

.design-gallery { max-width: 1900px; margin: auto; padding: 64px 40px 100px; }
.design-gallery > h1 { margin: 0 0 48px; font-size: 36px; font-weight: 500; letter-spacing: -.05em; }
.design-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.design-gallery__item { position: relative; min-width: 0; }
.design-gallery__canvas { width: 100%; aspect-ratio: 10 / 7; overflow: hidden; background: #fff; }
.design-gallery__canvas iframe { display: block; width: 1200px; height: 840px; border: 0; transform-origin: top left; pointer-events: none; }
.design-gallery__item h2 { margin: 22px 0 0; font-size: 21px; font-weight: 500; letter-spacing: -.035em; }
.design-gallery__item h2 a { display: flex; align-items: center; gap: 15px; color: inherit; }
.design-gallery__item h2 a::after { position: absolute; inset: 0; content: ""; }
.design-gallery__item:hover h2 a { text-decoration: underline; }
.design-gallery__item:focus-within { outline: 2px solid #4663e8; outline-offset: 10px; }
.design-gallery__number { color: #6b706b; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.design-gallery__arrow { margin-left: auto; font-size: 23px; }
.design-gallery--colours .design-gallery__grid { row-gap: 40px; }

.gpd {
  --bg: #fff;
  --ink: #222733;
  --muted: #686e7c;
  --accent: #395bd6;
  --surface: #f4f5f8;
  --line: #e2e4e9;
  --button-ink: #fff;
  min-height: calc(100svh - var(--toolbar-height));
  color: var(--ink);
  background: var(--bg);
}
.gpd a { color: inherit; }
.gpd__header { display: flex; align-items: center; gap: 64px; padding: 32px 48px; }
.gpd__brand { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; letter-spacing: -.055em; white-space: nowrap; }
.gpd__mark { width: 26px; height: 26px; color: var(--accent); }
.gpd__nav { display: flex; align-items: center; gap: 32px; }
.gpd__nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--muted); font-size: 14px; }
.gpd__nav a[aria-current] { color: var(--ink); }
.gpd__nav a:hover { color: var(--accent); }
.gpd__nav svg { display: none; width: 19px; height: 19px; }
.gpd__header > .user-menu { margin-left: auto; }
.gpd .user-menu__sign-in { padding: 10px 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: 14px; font-weight: 500; }
.gpd .user-menu__sign-in:hover { color: var(--accent); text-decoration: underline; }
.gpd .user-menu__button { color: var(--ink); border: 0; background: var(--surface); }
.gpd .user-menu__panel { color: var(--ink); background: var(--bg); border-color: var(--line); }
.gpd .user-menu__email { color: var(--ink); }
.gpd .user-menu__label, .gpd .user-menu__sign-out { color: var(--muted); }
.gpd .user-menu__sign-out { border-color: var(--line); }
.gpd .user-menu__admin { color: var(--accent); border-color: var(--line); }
.gpd .user-menu__admin:hover { color: var(--button-ink); background: var(--accent); }
.gpd__main { width: min(780px, calc(100% - 64px)); margin: 0 auto; padding: 130px 0 100px; }
.gpd__search-section h1 { margin: 0 0 35px; font-size: 42px; font-weight: 500; letter-spacing: -.055em; line-height: 1.12; }
.gpd__search { position: relative; }
.gpd__composer { display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 16px 14px 22px; background: var(--surface); border-radius: 12px; }
.gpd__composer:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.gpd__search-icon { flex: 0 0 21px; width: 21px; height: 21px; color: var(--muted); }
.gpd__composer textarea { width: 100%; min-width: 0; min-height: 28px; max-height: 240px; margin: 0; padding: 2px 0; border: 0; outline: none; border-radius: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 24px; }
.gpd__composer textarea::placeholder { color: var(--muted); opacity: 1; }
.gpd__send { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 15px; border: 0; border-radius: 7px; background: var(--accent); color: var(--button-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.gpd__send:hover { filter: brightness(.9); }
.gpd__send svg { width: 19px; height: 19px; }
.gpd__results { position: absolute; z-index: 10; top: calc(100% + 10px); width: 100%; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 12px 28px #0000000d; }
.gpd .search-result { padding: 15px 20px; color: var(--ink); border-color: var(--line); }
.gpd .search-result:hover, .gpd .search-result:focus-visible { color: var(--ink); background: var(--surface); }
.gpd .search-result__title { font-size: 15px; font-weight: 500; }
.gpd .search-result__snippet { display: none; }
.gpd .search-result__source, .gpd .search-results__status { color: var(--muted); font-size: 13px; }
.gpd__forms { margin-top: 60px; }
.gpd__section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.gpd__section-head h2 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.025em; }
.gpd__section-head a { padding: 10px 0; color: var(--muted); font-size: 14px; }
.gpd__section-head a:hover { color: var(--accent); text-decoration: underline; }
.gpd__form-list { margin: 0; padding: 0; list-style: none; }
.gpd__form { display: flex; align-items: center; gap: 20px; min-height: 72px; padding: 20px 0; }
.gpd__form:hover { color: var(--accent); }
.gpd__form:hover .gpd__form-title { text-decoration: underline; text-underline-offset: 5px; }
.gpd__form-title { min-width: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.gpd__form-number { display: none; color: var(--muted); font: 12px ui-monospace, monospace; }
.gpd__form-icon { flex: 0 0 23px; width: 23px; height: 23px; color: var(--accent); }
.gpd__form-arrow { margin-left: auto; color: var(--muted); font-size: 21px; }
.gpd__empty { margin: 24px 0; color: var(--muted); font-size: 16px; }

/* Index: a paper-like spread, large serif type, and a simple ruled index. */
.gpd--index { --bg: #f6f3eb; --ink: #302e28; --muted: #777369; --accent: #984d30; --surface: #ede8dd; --line: #d6d0c4; }
.gpd--index .gpd__header { margin: 0 48px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.gpd--index .gpd__brand { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 22px; }
.gpd--index .gpd__mark { display: none; }
.gpd--index .gpd__nav { margin-left: auto; }
.gpd--index .gpd__header > .user-menu { margin-left: 0; }
.gpd--index .gpd__main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 90px; width: min(1180px, calc(100% - 144px)); padding-top: 150px; }
.gpd--index .gpd__search-section h1 { margin-bottom: 48px; font-family: Georgia, "Times New Roman", serif; font-size: 88px; font-weight: 400; letter-spacing: -.075em; }
.gpd--index .gpd__composer { gap: 12px; padding: 0 0 20px; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; }
.gpd--index .gpd__search-icon { display: none; }
.gpd--index .gpd__send { padding: 0 0 0 12px; background: transparent; color: var(--accent); }
.gpd--index .gpd__forms { margin-top: 20px; }
.gpd--index .gpd__section-head { margin-bottom: 24px; }
.gpd--index .gpd__section-head h2 { font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; letter-spacing: -.045em; }
.gpd--index .gpd__form-list { border-top: 1px solid var(--line); }
.gpd--index .gpd__form-list li { border-bottom: 1px solid var(--line); }
.gpd--index .gpd__form-number { display: block; }
.gpd--index .gpd__form-icon { display: none; }

/* Clear: a centered search and open, unboxed form shortcuts. */
.gpd--clear .gpd__nav { margin-left: auto; }
.gpd--clear .gpd__header > .user-menu { margin-left: 0; }
.gpd--clear .gpd__search-section h1 { text-align: center; }
.gpd--clear .gpd__form-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.gpd--clear .gpd__form { position: relative; flex-direction: column; align-items: flex-start; gap: 17px; padding: 6px 28px 0 0; }
.gpd--clear .gpd__form-title { font-size: 15px; }
.gpd--clear .gpd__form-arrow { position: absolute; top: 4px; right: 4px; font-size: 19px; color: #8c93a4; }

/* Slate: compact navigation beside a flat, dark work surface. */
.gpd--slate { --bg: #1d222c; --sidebar: #181d26; --ink: #e6e9f0; --muted: #a1a9ba; --accent: #b6c4fe; --surface: #282f3d; --line: #343b48; --button-ink: #202b4e; display: grid; grid-template-columns: 244px minmax(0, 1fr); color-scheme: dark; }
.gpd--slate .gpd__header { align-items: stretch; flex-direction: column; justify-content: flex-start; gap: 68px; padding: 38px 25px 30px; background: var(--sidebar); }
.gpd--slate .gpd__brand { font-size: 16px; }
.gpd--slate .gpd__mark { width: 24px; height: 24px; }
.gpd--slate .gpd__nav { flex-direction: column; align-items: stretch; gap: 8px; margin: 0 -10px; }
.gpd--slate .gpd__nav a { min-height: 44px; padding: 0 12px; border-radius: 5px; }
.gpd--slate .gpd__nav a[aria-current] { background: var(--surface); color: var(--accent); }
.gpd--slate .gpd__nav svg { display: block; }
.gpd--slate .gpd__header > .user-menu { align-self: flex-start; margin: auto 0 0; }
.gpd--slate .user-menu__panel { top: auto; right: auto; bottom: calc(100% + 12px); left: 0; }
.gpd--slate .gpd__main { width: min(760px, calc(100% - 112px)); padding-top: 116px; }
.gpd--slate .gpd__search-section h1 { margin-bottom: 30px; font-size: 34px; font-weight: 500; }
.gpd--slate .gpd__composer { padding: 12px 14px 12px 20px; border-radius: 6px; }
.gpd--slate .gpd__send { border-radius: 4px; }
.gpd--slate .gpd__forms { margin-top: 72px; }
.gpd--slate .gpd__section-head { margin-bottom: 14px; }
.gpd--slate .gpd__form-list li { border-bottom: 1px solid var(--line); }
.gpd--slate .gpd__form { min-height: 68px; padding: 18px 0; }
.gpd--slate .gpd__form-icon { width: 20px; height: 20px; flex-basis: 20px; color: var(--muted); }
.gpd--slate .gpd__form-title { font-size: 15px; }

/* Colour studies use the exact same Slate layout and typography. */
.gpd--palette-graphite {
  --bg: #242424;
  --sidebar: #1b1b1b;
  --ink: #eeedea;
  --muted: #b0afab;
  --accent: #ded7c6;
  --surface: #303030;
  --line: #3e3e3c;
  --button-ink: #2b2a26;
}
.gpd--palette-forest {
  --bg: #1d2a27;
  --sidebar: #17221f;
  --ink: #e6eeea;
  --muted: #a7b7ad;
  --accent: #b1cdb7;
  --surface: #2b3a34;
  --line: #3c4a41;
  --button-ink: #23392c;
}
.gpd--palette-chalk {
  --bg: #fcfcfd;
  --sidebar: #f0f2f5;
  --ink: #242936;
  --muted: #656d7c;
  --accent: #3e5cbd;
  --surface: #eef1f5;
  --line: #dfe3e9;
  --button-ink: #fff;
  color-scheme: light;
}
.gpd--palette-sand {
  --bg: #f6f2e9;
  --sidebar: #ece6d9;
  --ink: #373128;
  --muted: #665f54;
  --accent: #935338;
  --surface: #eae4d8;
  --line: #d9d0bf;
  --button-ink: #fff;
  color-scheme: light;
}
.gpd--palette-mist {
  --bg: #edf4f3;
  --sidebar: #dfeae7;
  --ink: #233c37;
  --muted: #536a62;
  --accent: #286354;
  --surface: #dce8e4;
  --line: #c9d9d2;
  --button-ink: #fff;
  color-scheme: light;
}

@media (max-width: 1100px) {
  .designs--colours { --toolbar-height: 112px; }
  .designs--colours .designs__toolbar { flex-wrap: wrap; gap: 5px 20px; padding: 12px 24px 6px; }
  .designs--colours .designs__switcher { order: 2; justify-content: center; width: 100%; }
  .designs--colours .designs__switcher a { padding: 12px 10px; }
  .gpd--index .gpd__main { width: calc(100% - 96px); gap: 56px; }
  .gpd--index .gpd__search-section h1 { font-size: 76px; }
  .gpd--slate { grid-template-columns: 220px minmax(0, 1fr); }
  .gpd--slate .gpd__header { padding-right: 20px; padding-left: 20px; }
  .gpd--slate .gpd__main { width: calc(100% - 80px); }
}

@media (max-width: 800px) {
  .design-gallery { padding: 40px 24px 60px; }
  .design-gallery > h1 { margin-bottom: 32px; }
  .design-gallery__grid { grid-template-columns: 1fr; gap: 42px; }
  .design-gallery__item h2 { margin-top: 18px; }
  .gpd__header { flex-wrap: wrap; gap: 20px; padding: 24px; }
  .gpd__brand { font-size: 16px; }
  .gpd__nav { gap: 24px; }
  .gpd__main { width: calc(100% - 48px); padding-top: 100px; }
  .gpd--index .gpd__header { margin: 0 24px; padding: 24px 0; }
  .gpd--index .gpd__main { display: block; width: calc(100% - 64px); max-width: 580px; padding-top: 80px; }
  .gpd--index .gpd__forms { margin-top: 72px; }
  .gpd--slate { display: block; }
  .gpd--slate .gpd__header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px; }
  .gpd--slate .gpd__nav { order: 2; flex-direction: row; width: 100%; margin: 0 -12px; }
  .gpd--slate .gpd__header > .user-menu { align-self: auto; margin: 0; }
  .gpd--slate .user-menu__panel { top: calc(100% + 12px); bottom: auto; right: 0; left: auto; }
  .gpd--slate .gpd__main { width: calc(100% - 48px); padding-top: 60px; }
}

@media (max-width: 580px) {
  .designs { --toolbar-height: 110px; }
  .designs--canvas { --toolbar-height: 0px; }
  .designs__toolbar { flex-wrap: wrap; gap: 5px 20px; padding: 12px 20px 6px; }
  .designs__switcher { order: 2; justify-content: center; width: 100%; }
  .designs__switcher a { padding: 12px 14px; }
  .designs__back, .designs__current { font-size: 13px; }
  .designs--colours { --toolbar-height: 148px; }
  .designs--colours .designs__switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .designs--colours .designs__switcher a { justify-content: center; padding: 10px 6px; }
  .gpd__header { gap: 16px; }
  .gpd__header .gpd__nav { order: 2; width: 100%; margin-left: 0; }
  .gpd__header > .user-menu { margin-left: auto; }
  .gpd--clear .gpd__header > .user-menu { margin-left: auto; }
  .gpd__main { padding-top: 72px; }
  .gpd__search-section h1 { font-size: 34px; }
  .gpd__composer { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
  .gpd__composer textarea { flex: 1 1 180px; }
  .gpd__send { margin-left: auto; }
  .gpd__search-icon { display: none; }
  .gpd__forms { margin-top: 48px; }
  .gpd--clear .gpd__form-list { grid-template-columns: 1fr; gap: 0; }
  .gpd--clear .gpd__form { flex-direction: row; align-items: center; gap: 18px; padding: 18px 0; }
  .gpd--clear .gpd__form-arrow { position: static; }
  .gpd--index .gpd__header > .user-menu { margin-left: auto; }
  .gpd--index .gpd__main { padding-top: 56px; }
  .gpd--index .gpd__search-section h1 { margin-bottom: 32px; font-size: 68px; }
  .gpd--index .gpd__forms { margin-top: 60px; }
  .gpd--index .gpd__form { gap: 16px; }
  .gpd--slate .gpd__composer { padding: 10px 12px; }
  .gpd--slate .gpd__forms { margin-top: 48px; }
}

.designs--colours.designs--canvas { --toolbar-height: 0px; }