/* ========================================================================== WORK SKILLPRINT · page-specific composition -------------------------------------------------------------------------- Loaded after css/skillprint.css and scoped to .page--work. Nothing here restyles a shared component — these rules compose existing tokens into the Work-only arrangements (occupation rows and cards, the ability map, theory chips, pathway sequences) and extend two shared behaviours to this surface (collapsed-rail tooltips, the touch peek). ========================================================================== */ /* === GUARDS === */ .page--work [hidden] { display: none !important; } /* The shared sheet still hides the peek on touch; the Work pages want the tap-to-peek path, so the floating card stays available here. */ @media (hover: none) { .page--work .game-peek { display: grid; } } /* === COLLAPSED RAIL · icon tooltips === The nav's scroll container is overflow:auto, so a tooltip drawn as ::after on the link is clipped to a ~5px sliver and the label is unreadable. One element on , positioned on hover/focus, escapes every clipping ancestor. */ .work-tip { position: fixed; z-index: 200; padding: var(--space-6) var(--space-10); border: 1px solid var(--surface-border-hover); border-radius: var(--radius-control); background: var(--surface-raised); color: var(--text-strong); font-size: var(--font-size-sm); font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease; } .work-tip.is-visible { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .work-tip { transition: none; } } /* === HEAD === */ .page--work .portal-eyebrow .ui-badge { margin-inline-start: var(--space-8); vertical-align: middle; } /* Tab groups use the shared .button-group; it already owns the selected state (aria-pressed / .is-current), its focus ring and its keyboard affordances. */ /* === OCCUPATION ROWS === */ .work-results { display: grid; gap: var(--space-8); } .work-occ-row { display: flex; align-items: center; gap: var(--space-12); min-width: 0; padding: var(--space-10) var(--space-14); border: 1px solid var(--surface-border); border-radius: var(--radius-compact); background: var(--surface-box); text-decoration: none; color: inherit; } .work-occ-row:hover { background: var(--surface-raised); border-color: var(--surface-border-hover); } .work-occ-row__main { display: grid; gap: var(--space-2); min-width: 0; flex: 1; } .work-occ-row__main strong { font-size: var(--font-size-md); line-height: 20px; } .work-occ-row__meta { color: var(--muted); font-size: var(--font-size-sm); } .work-occ-row__meta code { font-family: var(--font-mono, ui-monospace, monospace); } .work-occ-row__note { color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; } .work-occ-row__go { color: var(--muted); flex: none; } .work-result-count { color: var(--muted); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } /* === SEARCH FIELD === The shared component's geometry lives under .page--portal-games in the design system sheet, which Work does not carry - so the input had no height and the clear button no offsets, landing below the field. These bind the same component with the portal's own values rather than introducing a new one. */ .page--work .portal-section__bar:has(.search-field) { align-items: flex-end; gap: var(--space-24); } .page--work .portal-section__bar .search-field { flex: 0 1 var(--space-320); min-width: 0; } .page--work .search-field > svg { left: var(--space-12); top: 50%; width: var(--space-16); height: var(--space-16); transform: translateY(-50%); --icon-stroke: var(--icon-stroke-16); } .page--work .search-field input { height: var(--space-42); padding-block: 0; } /* The shared button keeps its 40px min box (the tap target); only its transparent padding would overhang a 42px field, so centre it rather than pinning the top. */ .page--work .clear-search { right: var(--space-6); top: 50%; transform: translateY(-50%); } @media (max-width: 720px) { .page--work .portal-section__bar:has(.search-field) { flex-wrap: wrap; align-items: stretch; } .page--work .portal-section__bar .search-field { flex: 1 1 100%; } } /* The shared sheet reveals the tick on [aria-selected]; these menus are menuitemradio, so the checked state needs mapping - the portal does the same for its own preview switcher. Without it no option ever looks chosen. */ .page--work [data-work-dropdown] [role="menuitemradio"][aria-checked="true"] .sp-dropdown__selected-mark { opacity: 1; } .page--work [data-work-dropdown] [role="menuitemradio"][aria-checked="true"] { background: color-mix(in srgb, var(--mindset-violet-500) 16%, var(--surface-box)); } /* A filter that is actually filtering should look different from one that is not. */ .page--work [data-work-dropdown]:not([data-selected=""]) .sp-dropdown__trigger { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); color: var(--text-strong); } /* === SECTION-BAR TAB GROUPS === The same treatment .search-field gets above: the bar is nowrap and .button-group is its own scroll container, so without this the group absorbs every pixel of shrink and clips its labels while the heading keeps full width. */ .page--work .portal-section__bar:has(.button-group) { align-items: flex-end; gap: var(--space-24); } .page--work .portal-section__bar .button-group { flex: 0 0 auto; } @media (max-width: 720px) { .page--work .portal-section__bar:has(.button-group) { flex-wrap: wrap; align-items: stretch; } .page--work .portal-section__bar .button-group { flex: 1 1 100%; } } /* === DIRECTORY TOOLBAR === */ /* .portal-toolbar__count carries margin-inline-end:auto from the shared sheet and the first dropdown used to claim margin-inline-start:auto too - two autos fighting left the count floating mid-bar. The count anchors the row; controls follow it. */ .page--work .portal-toolbar__count { margin-inline-end: auto; margin-inline-start: 0; } /* === OCCUPATION CARDS (directory) === */ .work-occ-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .work-occ-card { display: grid; gap: var(--space-10); align-content: start; min-width: 0; } .work-occ-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .work-occ-card__code { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); } .work-occ-card__title { margin: 0; font-size: var(--font-size-base); line-height: 24px; } .work-occ-card__category { margin: 0; color: var(--muted); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .work-occ-card__blurb { margin: 0; font-size: var(--font-size-md); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .work-occ-card__abilities { display: grid; gap: var(--space-6); } /* The title is the card's single link and it covers the card, so there is one stop per card for the keyboard rather than a title and a duplicate foot button. */ .work-occ-card { position: relative; } /* The stretched sheet itself comes from the shared `.page--portal [data-card-link]::after` rule; only the focus ring needs saying here, since the sheet draws none. */ .work-occ-card__link:focus-visible::after { outline: 2px solid var(--focus-ring, var(--violet)); outline-offset: 2px; } /* A negative work-style impact means the trait is not required. The bar clamps to empty; this keeps the empty track legible instead of reading as a broken meter. */ .rail-meter.is-negative { opacity: 0.55; border: 1px dashed var(--surface-border-hover); background: transparent; } .work-style[data-negative="true"] .work-style__score { color: var(--muted); } /* The chevron is the only thing that says a disclosure is open. */ .page--work [data-work-expand] svg { transition: transform var(--transition-fast, 120ms) ease; } .page--work [data-work-expand][aria-expanded="true"] svg { transform: rotate(180deg); } /* === NOTICE (unknown occupation) === */ .work-notice { display: flex; align-items: flex-start; gap: var(--space-10); margin-block-start: var(--space-12); padding: var(--space-10) var(--space-14); border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--surface-border)); border-radius: var(--radius-compact); background: color-mix(in srgb, var(--violet) 7%, var(--surface-box)); font-size: var(--font-size-md); line-height: 20px; } .work-notice svg { flex: none; margin-block-start: var(--space-2); color: var(--violet); } .work-occ-fulltitle { margin-block-start: var(--space-4); } /* === RELATED LISTS === */ .work-related-list { display: grid; } /* In a ~300px rail a name and its category cannot share a row: the name wrapped to three lines while the category held its own column. Name first, category under it. */ .work-related.work-related--link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-10); color: inherit; text-decoration: none; margin-inline: calc(-1 * var(--space-6)); padding: var(--space-6); border-radius: var(--radius-control); } .work-related.work-related--link:hover { background: var(--surface-raised); } /* An entry with no page in this demo: same two-line shape, no affordance. */ .work-related.work-related--plain { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-6); margin-inline: calc(-1 * var(--space-6)); } .work-related.work-related--plain .work-related__name { font-weight: 600; color: var(--muted); } .work-related.work-related--plain .work-related__meta { color: var(--muted); font-size: var(--font-size-sm); line-height: 18px; } .work-related.work-related--link .work-related__name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; } .work-related.work-related--link code { grid-column: 1; grid-row: 1; } .work-related.work-related--link .work-occ-row__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); } .work-related.work-related--link .work-related__meta { grid-column: 1; grid-row: 2; color: var(--muted); font-size: var(--font-size-sm); line-height: 18px; } .work-more { justify-self: start; } /* === ABILITY ROWS === */ .work-abil { display: grid; /* A deterministic third track: with `auto` the skill chip sized itself per row, so meters and scores stepped by up to 17.7px down the column. */ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) var(--space-160); gap: var(--space-8) var(--space-14); align-items: center; padding-block: var(--space-8); border-bottom: 1px solid var(--surface-border); } .work-abil:last-child { border-bottom: 0; } .work-abil__id { display: grid; gap: var(--space-2); min-width: 0; } .work-abil__name { font-size: var(--font-size-md); font-weight: 600; } .work-abil__id code, .work-abil__score { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); } .work-abil__track { display: flex; align-items: center; gap: var(--space-10); min-width: 0; } .work-abil__track .rail-meter { flex: 1; } .work-abil__score { white-space: nowrap; } .work-abil--compact { grid-template-columns: minmax(0, 1fr) var(--space-72); padding-block: 0; border-bottom: 0; } .work-abil--compact .work-abil__name { font-size: var(--font-size-sm); font-weight: 500; color: var(--muted); } @media (max-width: 640px) { .work-abil { grid-template-columns: 1fr; gap: var(--space-6); } .work-abil__skill { justify-self: start; } /* The compact readout is a label plus a 72px meter and fits at every width the card does, so it keeps its two tracks instead of stacking to triple height. */ .work-abil--compact { grid-template-columns: minmax(0, 1fr) var(--space-72); gap: var(--space-8) var(--space-14); } } /* === ABILITY TAG === */ .work-detail__abilities { display: flex; flex-wrap: wrap; gap: var(--space-6); } .work-ability { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-10); border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-box); font-size: var(--font-size-sm); font-weight: 600; } .work-ability code { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); font-weight: 400; } /* === RIASEC === */ .work-riasec-list { display: grid; gap: var(--space-12); } .work-riasec { display: flex; gap: var(--space-12); align-items: flex-start; } .work-riasec__mark { display: grid; place-items: center; width: var(--space-28); height: var(--space-28); flex: none; border: 1px solid color-mix(in srgb, var(--violet) 32%, var(--surface-border)); border-radius: var(--radius-full); background: color-mix(in srgb, var(--violet) 10%, var(--surface-box)); color: var(--text-strong); font-size: var(--font-size-sm); font-weight: 600; } .work-riasec--lead .work-riasec__mark { background: color-mix(in srgb, var(--violet) 24%, var(--surface-box)); border-color: color-mix(in srgb, var(--violet) 55%, var(--surface-border)); } .work-riasec__body { display: grid; gap: var(--space-6); min-width: 0; flex: 1; } .work-riasec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); } .work-riasec__head strong { font-size: var(--font-size-md); } .work-riasec__score { color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; } .work-riasec__genre { margin: 0; font-size: var(--font-size-md); line-height: 20px; } .work-riasec__games, .work-map-row__games { display: flex; flex-wrap: wrap; gap: var(--space-6); } /* === GAME CHIP === */ .work-game-chip { display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-2) var(--space-10) var(--space-2) var(--space-2); border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-box); color: inherit; font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; } .work-game-chip:hover { background: var(--surface-raised); border-color: var(--surface-border-hover); } .work-game-chip img { width: var(--space-22); height: var(--space-22); border-radius: var(--radius-full); object-fit: cover; } /* === WORK STYLES === */ .work-style-grid { display: grid; gap: var(--space-14) var(--space-20); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .work-style { display: grid; gap: var(--space-6); align-content: start; } .work-style__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); } .work-style__score { color: var(--muted); font-size: var(--font-size-sm); } .work-style__facets { margin: 0; font-size: var(--font-size-sm); line-height: 20px; } /* === TASKS & RELATED === */ .work-task-list { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .work-task { display: flex; gap: var(--space-10); align-items: flex-start; font-size: var(--font-size-md); line-height: 20px; } .work-task__num { display: grid; place-items: center; width: var(--space-22); height: var(--space-22); flex: none; border: 1px solid var(--surface-border); border-radius: var(--radius-full); color: var(--muted); font-size: var(--font-size-sm); } .work-related { display: flex; gap: var(--space-10); align-items: baseline; padding-block: var(--space-6); border-bottom: 1px solid var(--surface-border); font-size: var(--font-size-md); } .work-related:last-child { border-bottom: 0; } .work-related code { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); flex: none; } /* === COGNITIVE MAP === */ .work-map { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(230px, 320px); justify-content: space-between; /* space-between already opens the gap on wide screens; a vw-derived minimum overflowed the card's inner edge in the 900-915 band. */ column-gap: var(--space-48); } .work-map__col { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-content: start; min-width: 0; } .work-map__col--groups { align-content: space-between; row-gap: var(--space-10); } .work-map__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .work-map__wires path { fill: none; stroke: var(--surface-border-hover); stroke-width: 1.5; opacity: 0.55; } .work-map.is-tracing .work-map__wires path { opacity: 0.1; } /* Must out-specify `.work-map.is-tracing .work-map__wires path` (0,3,1) above, or the highlighted wire dims with the rest and the trace reads as nothing happening. */ .work-map .work-map__wires path.is-hot, .work-map.is-tracing .work-map__wires path.is-hot { stroke: color-mix(in srgb, var(--violet) 75%, var(--surface-border-hover)); stroke-width: 2; opacity: 1; } .work-node { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-width: 0; padding: var(--space-6) var(--space-10); border: 1px solid var(--surface-border); border-radius: var(--radius-control); background: var(--surface-box); color: inherit; font-size: var(--font-size-md); font-weight: 600; text-align: left; } .work-node:hover { border-color: var(--border-hover); } .work-node__icon { flex: none; color: var(--accent-text); } .work-node__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-node__count { margin-inline-start: auto; color: var(--muted); font-size: var(--font-size-sm); } .work-node--group { display: grid; gap: var(--space-2); padding-block: var(--space-8); } .work-node--group .work-node__name { white-space: normal; font-size: var(--font-size-md); } .work-node__code { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); font-weight: 400; } /* Opacity on a control fades its TEXT toward the ground - even 0.75 left the 12px muted sub-labels at 3.36:1. De-emphasise the box; never the words. */ .work-map.is-tracing .work-node:not(.is-hot):not([aria-pressed="true"]) { border-color: transparent; background: transparent; } .work-node.is-hot { border-color: color-mix(in srgb, var(--violet) 48%, var(--border)); } .work-node[aria-pressed="true"] { background: color-mix(in srgb, var(--violet) 10%, var(--surface-box)); border-color: color-mix(in srgb, var(--violet) 60%, var(--border)); } @media (max-width: 767px) { .work-map { grid-template-columns: 1fr 1fr; column-gap: var(--space-12); } .work-map__wires { display: none; } .work-map.is-tracing .work-node:not(.is-hot):not([aria-pressed="true"]) { border-color: var(--surface-border); background: var(--surface-box); } } @media (max-width: 560px) { .work-map { grid-template-columns: 1fr; row-gap: var(--space-12); } } /* === MAP ROWS (work styles / interests panels) === */ .work-map-list { display: grid; } .work-map-row { display: flex; align-items: center; gap: var(--space-12); padding-block: var(--space-10); border-bottom: 1px solid var(--surface-border); } .work-map-row:last-child { border-bottom: 0; } .work-map-row__arrow { color: var(--muted); flex: none; display: inline-flex; } .work-map-row__facets { flex: 1; min-width: 0; color: var(--muted); font-size: var(--font-size-md); line-height: 20px; } .work-map-row__body { display: grid; gap: var(--space-2); min-width: 220px; } .work-map-row__body strong { font-size: var(--font-size-md); } .work-map-row__games { margin-inline-start: auto; justify-content: flex-end; } @media (max-width: 720px) { .work-map-row { flex-wrap: wrap; gap: var(--space-8) var(--space-12); } .work-map-row__body { min-width: 0; flex: 1; } .work-map-row__facets { flex-basis: 100%; } .work-map-row__games { margin-inline-start: 0; justify-content: flex-start; } } /* === DETAIL PANELS === */ .work-detail { display: grid; gap: var(--space-14); align-content: start; /* Nested .game-card is --surface-box, the same value as a card; on the canvas ground it separates in both themes instead of dissolving into its parent. */ background: var(--surface-canvas); } .work-detail__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); } .work-detail__head h3 { font-size: var(--font-size-base); } .work-detail__grid { display: grid; gap: var(--space-20); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .work-detail__col { display: grid; gap: var(--space-8); align-content: start; } .work-detail__more { display: inline-flex; align-items: center; gap: var(--space-4); width: fit-content; } @media (max-width: 800px) { .work-detail__grid { grid-template-columns: 1fr; } } /* === GAME GRIDS INSIDE DETAILS === */ .work-game-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* === THEORY DETAIL BADGE === All that survives of the chip row the hierarchy tree replaced: the mono code pill the detail head still renders. */ .work-chip__badge { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); padding: var(--space-2) var(--space-8); border: 1px solid var(--surface-border); border-radius: var(--radius-control); } /* === THEORY TREE === */ .work-tree { position: relative; display: grid; row-gap: var(--space-28); } .work-tree__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .work-tree__wires path { fill: none; stroke: var(--surface-border-hover); stroke-width: 1.5; opacity: 0.55; } .work-tree.is-tracing .work-tree__wires path { opacity: 0.12; } .work-tree .work-tree__wires path.is-hot, .work-tree.is-tracing .work-tree__wires path.is-hot { stroke: color-mix(in srgb, var(--violet) 75%, var(--surface-border-hover)); stroke-width: 2; opacity: 1; } .work-tree__row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); } .work-tree__root { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-14); border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--surface-border)); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--violet) 8%, var(--surface-box)); font-size: var(--font-size-md); font-weight: 600; } .work-tree__root code, .work-tree .work-node--broad code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-md); font-weight: 400; color: var(--muted); } .work-tree .work-node--broad { width: auto; display: inline-flex; align-items: center; gap: var(--space-8); } .work-tree .work-node--broad.is-hot code, .work-tree .work-node--broad[aria-pressed="true"] code { color: inherit; } .work-leaf { display: inline-flex; font-family: inherit; align-items: center; padding: var(--space-2) var(--space-10); border: 1px solid var(--surface-border); border-radius: var(--radius-pill); background: var(--surface-box); color: var(--muted); font-size: var(--font-size-sm); cursor: pointer; } .work-leaf.is-hot { border-color: color-mix(in srgb, var(--violet) 45%, var(--surface-border)); background: color-mix(in srgb, var(--violet) 8%, var(--surface-box)); color: var(--text-strong); } .work-tree.is-tracing .work-node--broad:not(.is-hot):not([aria-pressed="true"]), .work-tree.is-tracing .work-leaf:not(.is-hot) { border-color: transparent; background: transparent; } @media (max-width: 759px) { .work-tree { row-gap: var(--space-14); } .work-tree__wires { display: none; } .work-tree__row { justify-content: flex-start; } .work-tree.is-tracing .work-node--broad:not(.is-hot):not([aria-pressed="true"]), .work-tree.is-tracing .work-leaf:not(.is-hot) { border-color: var(--surface-border); background: var(--surface-box); } } /* === WORK-STYLE FACET BARS === */ .work-style__list { display: grid; gap: var(--space-4); } .work-facet { display: grid; grid-template-columns: minmax(0, 1fr) 72px 30px; gap: var(--space-8); align-items: center; color: var(--muted); font-size: var(--font-size-sm); } .work-facet .font-mono { text-align: right; } /* === PATHWAYS === */ .work-path-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .work-path-card { display: grid; gap: var(--space-10); align-content: start; min-width: 0; } .work-path-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .work-path-card__title { margin: 0; font-size: var(--font-size-base); line-height: 24px; } .work-path-card__focus { margin: 0; font-size: var(--font-size-md); line-height: 20px; } .work-path-card__tally { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); } /* .playbook-pip is the shared progress pip; it inks from --pb-ink, which only the playbook card sets. Supplying the token is what makes the shared component render here - all 12 pips were painting 0x4px and invisible without it. */ .page--work .work-path-card__tally .playbook-pips { flex: 1; min-width: var(--space-64); padding: 0; } .page--work .work-path-card .playbook-pip { --pb-ink: var(--muted); } .page--work .work-path-card .playbook-pip--played { --pb-ink: var(--violet); } .work-path-card__count { color: var(--muted); font-size: var(--font-size-sm); font-weight: 600; } .work-path-card.is-active { border-color: color-mix(in srgb, var(--violet) 55%, var(--surface-border)); background: color-mix(in srgb, var(--violet) 5%, var(--surface-box)); } /* === CAREERS === */ .work-career__link { color: inherit; text-decoration: none; } .work-career__link:hover { text-decoration: underline; } /* The stat's denominator is context, not a second number of equal weight. */ .page--work .rail-stat__of { font-size: var(--font-size-sm); font-weight: 400; } .work-career { display: grid; gap: var(--space-4); } .work-career__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); } .work-career__name { font-size: var(--font-size-md); font-weight: 600; } .work-career__head code { color: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-size-sm); flex: none; } .work-career__track { display: flex; align-items: center; gap: var(--space-10); } .work-career__track .rail-meter { flex: 1; } .work-career__score { color: var(--muted); font-size: var(--font-size-sm); } .work-framework__label { margin: 0; font-size: var(--font-size-md); } /* === ASSESSMENT SEQUENCE === */ .work-steps { display: grid; list-style: none; } .work-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14); padding-block: var(--space-16); } .work-step:first-child { padding-block-start: var(--space-4); } .work-step__spine { position: relative; width: var(--space-28); } .work-step__spine::before { content: ''; position: absolute; top: var(--space-32); bottom: calc(-1 * var(--space-28)); left: 50%; width: var(--space-2); translate: -50% 0; background: var(--surface-border); } .work-step:last-child .work-step__spine::before { display: none; } .work-step__marker { display: grid; place-items: center; width: var(--space-28); height: var(--space-28); border: 1px solid var(--surface-border); border-radius: var(--radius-full); background: var(--surface-box); color: var(--muted); font-size: var(--font-size-sm); font-weight: 600; } .work-step--done .work-step__marker { background: color-mix(in srgb, var(--green) 16%, var(--surface-box)); border-color: color-mix(in srgb, var(--green) 55%, var(--surface-border)); color: var(--text-strong); } .work-step--next .work-step__marker { background: color-mix(in srgb, var(--violet) 12%, var(--surface-box)); border-color: color-mix(in srgb, var(--violet) 55%, var(--surface-border)); color: var(--text-strong); } .work-step__body { display: grid; gap: var(--space-8); min-width: 0; } .work-step__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); } .work-step__head strong { font-size: var(--font-size-md); } /* Complete / Up next / Locked painted identically before: the state now drives the badge, and each carries a glyph so colour is never the only signal. */ .work-step__state { display: inline-flex; align-items: center; gap: var(--space-4); } .work-step__state[data-state="done"] { border-color: color-mix(in srgb, var(--green) 45%, var(--surface-border)); background: color-mix(in srgb, var(--green) 14%, var(--surface-box)); color: var(--text-strong); } .work-step__state[data-state="next"] { border-color: color-mix(in srgb, var(--violet) 50%, var(--surface-border)); background: color-mix(in srgb, var(--violet) 12%, var(--surface-box)); color: var(--text-strong); } .work-step__state[data-state="locked"] { color: var(--muted); } /* The selected pathway needs more than a 5% wash to read as chosen. */ .work-path-card.is-active::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--space-4); border-start-start-radius: inherit; border-end-start-radius: inherit; background: var(--violet); } .work-path-card { position: relative; } .work-step__note { margin: 0; font-size: var(--font-size-md); line-height: 20px; } .work-step__card { max-width: 360px; } /* A locked step still has to be readable: fade the artwork, not the words. The badge and the lock line already say it is locked. */ .work-step--locked .work-step__card .game-media { opacity: 0.5; filter: grayscale(0.5); } /* The card is inert and the badge says Locked; fading the action too only cost contrast. The greyed artwork carries the state. */ .work-step__lock { display: flex; align-items: center; gap: var(--space-6); margin: 0; font-size: var(--font-size-sm); } .work-step__badge { max-width: 480px; } /* Level-1 panels take the portal's own card step (24), not .sp-card's 16px fallback - the portal sets --card-current-padding on every equivalent panel (.portal-nextup, .skill-feature, .gd-panel). */ .page--work .portal-layout__main > .portal-section > .sp-card, .page--work .portal-section > .sp-card.work-detail, .page--work .work-detail { --card-current-padding: var(--space-24); } /* Touch targets. The shared buttons already meet 44px; these are the work-only controls that did not. */ @media (pointer: coarse) { .page--work .work-leaf, .page--work .work-node, .page--work .work-game-chip { min-height: var(--space-44); } .page--work .work-occ-row { min-height: var(--space-56); } } /* === DENSITY · the portal's mobile ladder (page 12 / card 14 / nested 10) === Work stayed on desktop padding at every width, so a phone lost a quarter of its line length to gutters the portal had already tuned away. */ @media (max-width: 767px) { .page--work .work-occ-grid, .page--work .work-path-grid { gap: var(--space-12); } .page--work .work-occ-row { padding: var(--space-10) var(--space-12); } .page--work .work-detail { gap: var(--space-12); } .page--work .work-style-grid { gap: var(--space-12) var(--space-14); } .page--work .work-step { padding-block: var(--space-12); gap: var(--space-10); } .page--work .work-riasec { gap: var(--space-10); } } /* === OVERVIEW EXTRAS === */ .work-alignment { display: grid; gap: var(--space-12); } .work-alignment__intro { margin: 0; font-size: var(--font-size-md); line-height: 20px; } .page--work .rail-card .sp-badge { margin-inline: 0; }