/* Cinema 4D 2026 Attribute Manager, recreated.
   Every color here was sampled from a screenshot of C4D 2026.3.1
   (build 2026_3_1_6d78600c5982_2611648045) on Windows at 100% UI
   scale (_Rebuild/redshift-primer/reference/, gitignored). Row pitch is 21px. Change a
   value only after comparing against a fresh capture with tools/compare_panel.py. */

:root {
  --am-bg: #2b2b2b;        /* panel */
  --am-dark: #1c1c1c;      /* manager header strip, text fields */
  --am-raised: #3d3d3d;    /* inactive tabs, dropdowns, unselected quick-tab */
  --am-sel: #595959;       /* selected quick-tab segment */
  --am-accent: #545a99;    /* active tab */
  --am-check: #5b61a6;     /* checked checkbox */
  --am-text: #cccccc;      /* labels, field text */
  --am-bright: #f2f2f2;    /* text on selected controls */
  --am-title: #ffffff;     /* section title */
  --am-muted: #a6a6a6;     /* object header */
  --am-disabled: #666666;  /* disabled labels, unchecked checkbox border */
  --am-line: #1f1f1f;      /* separator under a section title */
  /* Hover and selection are the primer's own affordances, NOT sampled from C4D -
     C4D does not tint rows this way. So they are free to be clearer than the rest
     of the palette, and they need to be: the old pair (#313131 hover, #34365a
     selected) was grey-on-grey and near-invisible on a projector. */
  --am-hover: #3a4170;     /* row under the pointer */
  --am-selected: #5560bd;  /* row whose description is open */
  --am-row: 21px;
  --am-label-x: 28px;
  --am-field-x: 120px;
}

.am {
  width: 465px;
  background: var(--am-bg);
  color: var(--am-text);
  font: 11px/1 "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: auto;
  user-select: none;
  overflow: hidden;
}
.am * { box-sizing: border-box; }
.am svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* manager tab strip: Attributes | Layers */
.am-mgrtabs { height: 24px; background: var(--am-dark); display: flex; }
.am-mgrtabs span { padding: 0 11px; line-height: 24px; color: var(--am-disabled); }
.am-mgrtabs span.on { background: var(--am-bg); color: var(--am-text); }

/* menu row */
.am-menu { height: 21px; display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.am-menu .icons { margin-left: auto; display: flex; gap: 6px; color: var(--am-text); }

/* object header */
.am-head { height: 27px; display: flex; align-items: center; padding: 0 6px; gap: 8px; color: var(--am-muted); }
.am-head .custom { margin-left: auto; height: 20px; border-radius: 10px; background: var(--am-raised); color: var(--am-text);
  display: flex; align-items: center; padding: 0 0 0 13px; gap: 8px; }
.am-head .custom i { width: 20px; height: 20px; border-left: 1px solid var(--am-bg); display: grid; place-items: center; }

/* property tabs. C4D keeps them on one line and clips; with nine render tabs at this
   width we wrap instead, but never inside a label. */
.am-tabs { min-height: 22px; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px; }
.am-tab { height: 18px; padding: 0 5px; border-radius: 3px; background: var(--am-raised); line-height: 18px; color: var(--am-text); white-space: nowrap; }
.am-tab.on { background: var(--am-accent); color: var(--am-bright); }

/* section title and separators */
.am-title { height: 28px; padding: 0 6px; display: flex; align-items: center; color: var(--am-title); font-size: 12.5px; }
.am-sep { height: 1px; margin: 0 4px; background: var(--am-line); }
.am-sep.soft { background: var(--am-raised); margin: 3px 4px; }

/* collapsible group header (ICON) */
.am-group { height: 25px; display: flex; align-items: center; padding-left: 12px; gap: 6px; font-weight: 700; font-size: 11px; color: #e0e0e0; }
/* Named SEPARATOR: a section heading with no chevron and nothing folding under it. */
.am-sechead { height: 25px; display: flex; align-items: center; padding-left: 12px; font-weight: 700; font-size: 11px; color: #e0e0e0; }

/* property rows */
.am-row { height: var(--am-row); display: flex; align-items: center; position: relative; }
.am-row .kf { position: absolute; left: 8px; width: 10px; height: 10px; color: var(--am-text); stroke-width: 1; }
.am-row .label { position: absolute; left: var(--am-label-x); }
.am-row .ctl { position: absolute; left: var(--am-field-x); right: 6px; height: 19px; display: flex; align-items: center; }
.am-row.disabled .label, .am-row.disabled .kf { color: var(--am-disabled); }

.am-field { flex: 1; height: 19px; border-radius: 3px; background: var(--am-dark); padding: 0 6px; line-height: 19px; color: var(--am-text); }
.am-quick { flex: 1; height: 19px; border-radius: 3px; background: var(--am-raised); display: flex; }
.am-quick span { flex: 1; text-align: center; line-height: 19px; border-radius: 3px; }
.am-quick span.on { background: var(--am-sel); color: var(--am-bright); }
.am-check { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--am-disabled); margin-left: 2px; display: grid; place-items: center; }
.am-check.on { background: var(--am-check); border-color: var(--am-check); color: #fff; }
.am-drop { flex: 1; height: 19px; border-radius: 3px; background: var(--am-raised); padding: 0 6px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.am-swatch { width: 68px; height: 19px; border-radius: 2px; border: 1px solid var(--am-raised); margin-left: 0; }

/* Font verified 2026-09-11: 11px Segoe UI puts the "Viewport Visibility" label ink on
   exactly the same pixels as C4D (x 28-114). Mean difference on the Basic tab: 4.43. */

/* --- interactive panel (am.js) ---------------------------------------------------
   Measured on the Object tab captures (03, 04): a slider row is 23px, its number field
   76px wide, then a 4px track - accent fill, #1c1c1c remainder, 8px round handle. */
.am-body { overflow-y: auto; overscroll-behavior: contain; }
.am-grp > .am-grp-body { display: none; }
.am-grp.open > .am-grp-body { display: block; padding-bottom: 6px; }
.am-group { cursor: pointer; outline: none; }
.am-group:focus-visible { box-shadow: inset 0 0 0 1px var(--am-accent); }
.am-group .chev { transition: transform 0.1s; }
.am-grp.open > .am-group .chev { transform: rotate(90deg); }

.am-param, .am-vcell { cursor: pointer; outline: none; }
.am-param:hover, .am-vcell:hover { background: var(--am-hover); }
.am-param.selected, .am-vcell.selected { background: var(--am-selected); color: var(--am-bright); }
.am-param.selected .label, .am-vcell.selected .label { color: var(--am-bright); }
.am-param:focus-visible, .am-vcell:focus-visible { box-shadow: inset 0 0 0 1px var(--am-accent); }
.am-row.has-slider { height: 23px; }
.am-row.child .label { padding-left: 12px; }
.am-row.tall { height: 120px; align-items: flex-start; padding-top: 3px; }
.am-row.tall .ctl { top: 3px; height: 112px; }
.am-row .label .fold { display: inline-block; width: 11px; vertical-align: -1px; }
.am-row .label .fold .chev { transition: transform 0.1s; }
.am-row .label .fold.open .chev { transform: rotate(90deg); }
.am-row.disabled .label, .am-row.disabled .ctl { color: var(--am-disabled); }
.am-row.disabled .am-slider i, .am-row.disabled .am-slider b { background: #2e304d; }
.am-row.disabled .am-number, .am-row.disabled .am-drop, .am-row.disabled .am-quick { opacity: 0.55; }
/* A greyed-out row that is selected: grey on the blue highlight is unreadable, so go white. */
.am-row.disabled.selected .label, .am-row.disabled.selected .ctl, .am-row.disabled.selected .kf { color: var(--am-bright); }

.am-number { flex: none; width: 76px; height: 19px; border-radius: 3px; background: var(--am-dark); line-height: 19px; text-align: center; }
/* VECTOR rows draw their components as adjacent fields: Angle of View, Shift, Size (mm). */
.ctl > .am-number + .am-number { margin-left: 6px; }

/* Color Controls curves. Four stacked make the tallest block on the camera. */
.am-row.curve { height: 160px; align-items: flex-start; }
.am-row.curve .label { top: 4px; }
.am-row.curve .kf { top: 8px; }
.am-row.curve .ctl { top: 3px; height: 152px; }
.am-curve { flex: 1; height: 152px; background: var(--am-dark); border: 1px solid var(--am-raised); border-radius: 2px; }
.am-curve svg { display: block; width: 100%; height: 100%; }
.am-curve .grid line { stroke: #333333; stroke-width: 1; vector-effect: non-scaling-stroke; }
.am-curve .ink { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.am-curve .handle { fill: #c8c8c8; }
.am-row.disabled .am-curve { opacity: 0.55; }
.am-slider { position: relative; flex: 1; height: 4px; margin: 0 4px 0 4px; border-radius: 2px; background: var(--am-dark); }
.am-slider i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--am-accent); }
.am-slider b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--am-accent); }
.am-drop { position: relative; }
.am-drop.narrow { flex: none; width: 110px; }
.am-drop select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font: inherit; }
.am-icon { flex: none; margin-left: 8px; display: grid; place-items: center; color: var(--am-text); }
.am .ctl > .chev { flex: none; margin: 0 1px 0 -12px; }
.am-button { flex: none; height: 19px; padding: 0 12px; margin-left: 10px; border-radius: 10px; background: var(--am-raised); line-height: 19px; color: var(--am-bright); cursor: pointer; outline: none; }
.am-button:first-child { margin-left: 0; }
.am-button.round { width: 19px; padding: 0; display: grid; place-items: center; }
.am-button.disabled { background: #333; color: var(--am-disabled); }
.am-button.selected { box-shadow: 0 0 0 1px var(--am-accent); }
.am-button:focus-visible { box-shadow: 0 0 0 1px var(--am-accent); }
.am-list { flex: 1; height: 100%; border-radius: 3px; background: var(--am-dark); }

.am-note .label { left: 20px; color: var(--am-text); }
.am-vgrid .am-row { height: 21px; }
.am-vcell { position: absolute; top: 0; bottom: 0; }
.am-vgrid .am-row { position: relative; }
.am-vcell .kf { position: absolute; top: 5px; width: 10px; height: 10px; }
.am-vcell .vlabel { position: absolute; top: 4px; letter-spacing: 0; }
.am-vcell .vfield { position: absolute; top: 1px; width: 76px; text-align: center; padding: 0; }

/* Node-material socket rows (OpenPBR Bump Map, Anisotropy Tangent, UV Context): no value, just
   a note that nothing is wired in. */
.am-socket { display: inline-flex; align-items: center; gap: 6px; color: var(--am-disabled); font-style: italic; }
.am-socket::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--am-text); border-radius: 50%; }