/* ==========================================================================
   K05 Iconography & Imagery — page styles
   Icon set with search + size switch (05.1), annotated device drawings
   (05.2) and photo-direction placeholders (05.3).
   ========================================================================== */

/* ── 05.1 Icon set: controls ────────────────────────────────────────────── */

.icon-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.icon-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
}

.icon-search__input {
  width: 140px;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 14px/1 'Geist', sans-serif;
}

/* Segmented size switch (radiogroup) */
.size-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
}

.size-switch__option {
  height: 32px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  font: 500 12px/1 'Geist Mono', monospace;
  cursor: pointer;
}
.size-switch__option[aria-checked="true"] {
  background: var(--graphite-900);
  color: var(--graphite-50);
}

/* ── 05.1 Icon set: groups and tiles ────────────────────────────────────── */

.icon-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.icon-group__name {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .1em;
  color: var(--graphite-500);
}

.icon-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  border-top: 1px solid var(--ink-a10);
  border-left: 1px solid var(--ink-a10);
  background: var(--graphite-0);
}

.icon-tile {
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-right: 1px solid var(--ink-a10);
  border-bottom: 1px solid var(--ink-a10);
  color: var(--graphite-900);
}

.icon-tile__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.icon-tile__name {
  font: 400 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── 05.1 Notes under the icon set ──────────────────────────────────────── */

.icon-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.icon-note {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--color-hairline);
  background: var(--graphite-0);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Open item — dashed, no fill */
.icon-note--pending {
  border: 1px dashed var(--ink-a30);
  background: transparent;
}

.icon-note__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}
.icon-note--pending .icon-note__label { color: var(--yellow-700); }

.icon-note__title { font: 500 16px/1.3 'Geist', sans-serif; }

.icon-note__text {
  font: 400 14px/1.45 'Geist', sans-serif;
  color: var(--graphite-600);
}

.icon-note__body {
  font: 400 14px/1.55 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* ── 05.2 Device visuals ────────────────────────────────────────────────── */

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

/* Square card on a 20 px graph grid */
.device-figure {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  border: 1px solid var(--color-hairline);
  background-color: var(--graphite-0);
  background-image:
    linear-gradient(var(--ink-a04) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-a04) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
}

.device-figure__meta {
  position: absolute;
  left: 16px;
  top: 14px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

/* Hatched circle standing in for the line drawing */
.device-figure__drawing {
  position: absolute;
  left: 14%;
  top: 18%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(10, 18, 22, .18);
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 10px, var(--sage-150) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-figure__placeholder {
  max-width: 70%;
  text-align: center;
  font: 500 10px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}

.device-figure__name {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font: 500 15px/1 'Geist', sans-serif;
}

/* Leader line: ring at (--x, --y), line of length --w, label on the right edge.
   The wrapper does not render a box; its children are placed on the figure. */
.leader { display: contents; }

.leader__ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1px solid var(--graphite-900);
  background: var(--graphite-0);
}

.leader__line {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 1px;
  margin-left: 5px;
  background: var(--graphite-900);
}

.leader__label {
  position: absolute;
  right: 12px;
  top: var(--y);
  transform: translateY(-50%);
  max-width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--ink-a16);
  border-radius: 6px;
  background: var(--graphite-0);
  font: 500 11px/1.3 'Geist Mono', monospace;
  color: var(--graphite-900);
}

.section-text {
  margin: 0;
  max-width: 760px;
  font: 400 15px/1.55 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 05.3 Photo direction ───────────────────────────────────────────────── */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.photo-slot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hatched placeholder frame; tone modifiers set the two stripe colours + ink */
.photo-slot__frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--tone-a) 0 12px, var(--tone-b) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-slot__frame--round { border-radius: 50%; }
.photo-slot__frame--4x3 { aspect-ratio: 4 / 3; }
.photo-slot__frame--4x5 { aspect-ratio: 4 / 5; }

.photo-slot__frame--scrub    { --tone-a: var(--sage-200);  --tone-b: var(--sage-250);  --tone-ink: var(--sage-800); }
.photo-slot__frame--natural  { --tone-a: var(--sage-100);  --tone-b: var(--sage-150);  --tone-ink: var(--graphite-600); }
.photo-slot__frame--warm     { --tone-a: var(--sand-100);  --tone-b: var(--sand-200);  --tone-ink: var(--sand-700); }
.photo-slot__frame--graphite { --tone-a: #DADFDD;          --tone-b: #CFD5D2;          --tone-ink: var(--graphite-700); }

.photo-slot__subject {
  max-width: 76%;
  text-align: center;
  font: 500 11px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--tone-ink);
}

.photo-slot__caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 400 12px/1.4 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* Show / Never rules */
.photo-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.photo-rule {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--color-hairline);
  background: var(--graphite-0);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-rule__verdict {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font: 500 12px/1 'Geist', sans-serif;
}
.photo-rule__verdict--show  { background: var(--status-success-bg); color: var(--status-success-fg); }
.photo-rule__verdict--never { background: var(--status-high-bg);    color: var(--status-high-fg); }

.photo-rule__text {
  font: 400 15px/1.6 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* Pager sits directly under the rules here (no extra top padding) */