/* ==========================================================================
   FLAT DESIGN — Build with it board. Loaded on a/flat-design.html only.
   The room's mosaic, continued: solid tiles, one hue and one flat icon each,
   an 8px gutter, no shadow, gradient, blur or bevel anywhere. Headings in the
   room's Schibsted ("SchibstedX", declared by the room's stylesheet); the
   Typography specimen is set in the system sans the record names.
   Contrast: ink #1D2A36 on white 14.9, on yellow 9.3, on orange 5.2;
   white on navy 12.4, on deep teal 6.6, on ink 14.9.
   ========================================================================== */
.gm--flat-design { max-width: none; margin: 0 8px 8px; padding: clamp(22px, 4vw, 48px) 0 0; background: #F5F6F4; color: #1D2A36; font-family: "SchibstedX", "Helvetica Neue", Arial, sans-serif; --gm-tag-inverse: #FFFFFF; }
.gm--flat-design .gm__head { padding: 0 clamp(22px, 4vw, 48px); }
.gm--flat-design .gm__title { font-weight: 900; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1; }
.gm--flat-design :focus-visible { outline: 4px solid #F7C948; outline-offset: 0; }
.gm--flat-design .gm-t { border-width: 2px; border-radius: 0; white-space: normal; max-width: 100%; }

.gfd-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gfd-f { padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
.gfd-s2 { grid-column: span 2; }
.gfd-s3 { grid-column: span 3; }
.gfd-s4 { grid-column: span 4; }
.gfd-f .gm-f__head { align-items: center; gap: 12px; }
.gfd-f .gm-f__n { display: none; }
.gfd-f .gm-f__name { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.01em; line-height: 1.05; }
.gfd-ic { width: 36px; height: 36px; flex: 0 0 auto; }
.gfd-cap { margin: 10px 0 0; font-size: 1rem; line-height: 1.45; }
.gfd-f .gm-ls li { border-top-color: currentColor; }

/* hues, as the room sets them */
.gfd-wh { background: #FFFFFF; color: #1D2A36; --gm-tag-inverse: #FFFFFF; }
.gfd-yel { background: #F7C948; color: #1D2A36; --gm-tag-inverse: #F7C948; }
.gfd-or { background: #F4762E; color: #1D2A36; --gm-tag-inverse: #F4762E; }
.gfd-navy { background: #22364A; color: #FFFFFF; --gm-tag-inverse: #22364A; }
.gfd-dteal { background: #00695F; color: #FFFFFF; --gm-tag-inverse: #00695F; }
.gfd-ink { background: #1D2A36; color: #FFFFFF; --gm-tag-inverse: #1D2A36; }
.gfd-navy a, .gfd-dteal a, .gfd-ink a { color: #FFFFFF; }

/* colour */
.gfd-swatch { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gfd-swatch span { padding: 34px 6px 6px; font-size: 11px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.gfd-swatch b { display: block; font-size: 12px; }
.gfd-sw__ground { background: #F5F6F4; color: #1D2A36; }
.gfd-sw__ink { background: #1D2A36; color: #FFFFFF; }
.gfd-sw__key { background: #00695F; color: #FFFFFF; }
.gfd-sw__teal { background: #009688; color: #1D2A36; }
.gfd-sw__orange { background: #F4762E; color: #1D2A36; }
.gfd-sw__navy { background: #22364A; color: #FFFFFF; }
.gfd-sw__yellow { background: #F7C948; color: #1D2A36; }
.gfd-themes { display: flex; gap: 8px; margin-top: 12px; }
.gfd-themes span { width: 64px; height: 64px; padding: 10px; display: flex; align-items: flex-end; }
.gfd-themes i { width: 20px; height: 20px; background: #00695F; }
.gfd-themes__l { background: #F5F6F4; }
.gfd-themes__d { background: #1D2A36; }
.gfd-themes__d i { background: #009688; }

/* type: the system sans the record names */
.gfd-sys { margin: 0; font-family: system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; font-size: clamp(36px, 4.4vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }

/* layout */
.gfd-mos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 40px 40px; gap: 4px; }
.gfd-mos i:nth-child(1) { grid-row: span 2; background: #009688; }
.gfd-mos i:nth-child(2) { background: #F4762E; }
.gfd-mos i:nth-child(3) { background: #F7C948; }
.gfd-mos i:nth-child(4) { background: #FFFFFF; }
.gfd-mos i:nth-child(5) { background: #00695F; }

/* icons */
.gfd-icons { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.gfd-icons .gfd-ic { width: 40px; height: 40px; }

/* components */
.gfd-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 16px; font-family: system-ui, "Segoe UI", -apple-system, sans-serif; font-size: 1.5rem; }
.gfd-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #1D2A36; text-decoration: none; border-bottom: 4px solid transparent; }
.gfd-nav a:hover { color: #00695F; }
.gfd-nav a[aria-current="page"] { color: #00695F; font-weight: 700; border-bottom-color: #00695F; }
.gfd-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: start; }
.gm--flat-design a.gfd-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: #F4762E; color: #1D2A36; text-decoration: none; transition: transform .2s, background-color .2s; }
.gm--flat-design a.gfd-card:hover { transform: translateX(6px); background: #F7C948; }
.gfd-card b { font-size: 1.375rem; font-weight: 900; }
.gfd-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 18px; background: #F5F6F4; }
.gfd-form label { flex: 0 0 100%; font-weight: 700; }
.gfd-form input { flex: 1 1 10rem; min-width: 0; height: 44px; padding: 0 10px; border: 0; border-bottom: 3px solid #1D2A36; border-radius: 0; background: #FFFFFF; color: #1D2A36; }
.gm--flat-design .gfd-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: #00695F; color: #FFFFFF; font-weight: 700; cursor: pointer; }
.gm--flat-design .gfd-btn:hover { background: #22364A; }
.gm--flat-design .gfd-btn:active { background: #1D2A36; }
.gfd-bar { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; padding: 6px 12px; background: #F5F6F4; }
.gfd-bar button { min-height: 44px; padding: 0 8px; border: 0; background: none; color: #1D2A36; font-family: system-ui, "Segoe UI", -apple-system, sans-serif; font-size: 1.0625rem; cursor: pointer; }
.gfd-bar .gfd-bar__key { color: #00695F; font-weight: 700; }

/* motion: in the plane */
.gm--flat-design a.gfd-slide { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; background: #00695F; color: #FFFFFF; font-weight: 700; text-decoration: none; transition: transform .2s, background-color .2s; }
.gm--flat-design a.gfd-slide:hover { transform: translateX(6px); background: #22364A; }
.gfd-slide .gfd-ic { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .gm--flat-design a.gfd-card, .gm--flat-design a.gfd-slide { transition: none; }
  .gm--flat-design a.gfd-card:hover, .gm--flat-design a.gfd-slide:hover { transform: none; }
}

@media (max-width: 900px) {
  .gfd-mosaic { grid-template-columns: minmax(0, 1fr); }
  .gfd-s2, .gfd-s3, .gfd-s4 { grid-column: auto; }
  .gfd-ui { grid-template-columns: minmax(0, 1fr); }
  .gfd-swatch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}