/* Page craft: each module keeps its original layout and object language. */
:root {
  --craft-ease: cubic-bezier(.22, .8, .24, 1);
  --craft-hover: 150ms;
  --craft-state: 230ms;
  --craft-line: var(--ny-line, rgba(159, 190, 201, .2));
  --craft-lime: var(--ny-accent, #c8e791);
  --craft-ice: var(--ny-focus, #91d2dd);
  --craft-gold: #c9a35f;
}

/* The ordinary reading frame needs more than a 24px desktop edge. */
:root { --craft-gutter: clamp(30px, 4vw, 72px); }
#main-content > :is(.course-catalog, .projects, .guides-page, .journal-layout),
.wh-page:not(.wh-page-narrow), .manage-home, .ra-shell, .mc-page {
  width: min(1240px, calc(100% - 2 * var(--craft-gutter)));
  margin-inline: auto;
}
#main-content > .journal-layout.journal-workbench { width: min(1360px, calc(100% - 2 * var(--craft-gutter))); }
.career-reference-page .intern-shell.intern-browser { width: min(1540px, calc(100% - 2 * var(--craft-gutter))); }
@media (max-width: 640px) { :root { --craft-gutter: 18px; } }

/* Keep uninitialised/offscreen content readable. Once an existing controller
   starts its named animation, allow that animation's own fade and movement. */
main :is(.rise:not(.in), .motion-pending),
.wh-page :is(.rise:not(.in), .motion-pending), .manage-home :is(.rise:not(.in), .motion-pending) {
  opacity: 1 !important;
}
main .motion-pending { transform: none; }
/* Keep the original named gestures intact. Module motion decorates a page's
   edge, bookmark or icon; it does not replace every animation with one rise. */
main .motion-pending.motion-line { opacity: 1 !important; }
main .motion-pending.motion-line { transform: none; }

/* Animate committed work content locally. Document snapshots can rasterize
   the persistent SVG glass header as black; they also move unrelated chrome. */

/* Course pages behave like a folio: stable rows, a quiet bookmark and legible data. */
.catalog-list .catalog-row,
.course-workspace-page .asset-row {
  position: relative;
  transition: background-color var(--craft-hover) ease,
    border-color var(--craft-hover) ease;
}
.catalog-search-area { position: relative; z-index: 1; }
.catalog-workspace { position: relative; z-index: 1; }
.catalog-caption h2>span { font-variant-numeric: tabular-nums; }
.course-workspace-page .asset-row { padding-inline: 16px; }
.catalog-list .catalog-row::before,
.course-workspace-page .asset-row::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 2px;
  background: var(--craft-lime);
  opacity: 0;
  transform: scaleY(.5);
  transition: opacity var(--craft-state) ease, transform var(--craft-state) var(--craft-ease);
  pointer-events: none;
}
.catalog-list .catalog-row:is(:hover, :focus-within, [aria-selected="true"])::before,
.course-workspace-page .asset-row:is(:hover, :focus-within)::before {
  opacity: .85;
  transform: none;
}
.catalog-code, .catalog-materials strong, .course-summary,
.path-term-index, .path-row-heading>span { font-variant-numeric: tabular-nums; }
.course-section-nav a[aria-current], .course-section-nav a[data-current],
.path-year-nav a[aria-current] { text-decoration-color: var(--craft-lime); }
.path-course[data-craft-located] { animation: craft-located 360ms ease-out; }
@keyframes craft-located { 45% { box-shadow: inset 3px 0 var(--craft-lime); } }
/* Dense rows have no entrance delay. Their moving folio rail supplies the
   gesture; editorial and paper objects retain their own animation vocabulary. */
.catalog-list .catalog-row,
.course-resource-section, .course-discussion, .course-history, .course-related,
.career-reference-page .career-row { animation-name: none; opacity: 1 !important; }
.catalog-heading, .catalog-filters, .course-title-row,
.journal-heading, .journal-status-tabs { opacity: 1 !important; }

/* Blog: a folio line belongs to the editorial header, not every paragraph. */
.journal-list .journal-article-row {
  position: relative;
  transition: background-color var(--craft-hover) ease;
}
.journal-list .journal-article-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--craft-ice);
  opacity: 0;
  transition: opacity var(--craft-hover) ease;
  pointer-events: none;
}
.journal-list .journal-article-row:is(:hover, :focus-within)::before { opacity: .8; }
.journal-list .journal-article-link h2 { text-decoration: underline transparent 1px; text-underline-offset: 5px; transition: text-decoration-color var(--craft-hover) ease; }
.journal-list .journal-article-link:is(:hover, :focus-visible) h2 { text-decoration-color: var(--craft-ice); }
/* Editorial titles answer the reader, while the article row and metadata
   remain on their original baseline. No padding or hit-target movement. */
#main-content .journal-public-index .journal-article-link h2 {
  transition: transform 420ms var(--craft-ease), text-decoration-color 180ms ease;
}
#main-content .journal-public-index .journal-article-link:focus-visible h2 { transform: translateX(3px); }
.catalog-row .catalog-row-arrow { display: inline-block; transition: transform 280ms var(--craft-ease); }
.catalog-row:focus-within .catalog-row-arrow { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  #main-content .journal-public-index .journal-article-link:hover h2 { transform: translateX(3px); }
  .catalog-row:hover .catalog-row-arrow { transform: translateX(4px); }
}
.journal-layout .journal-heading { padding-bottom: 16px; border-bottom: 1px solid var(--craft-line); }
.journal-layout .journal-article-meta { font-variant-numeric: tabular-nums; }
.journal-reading .journal-prose { max-width: min(100%, 760px); }
/* Published is an existing business state. Preserve its original breathing
   point instead of flattening it with the static data-row rules. */
.journal-post-state--published::before { animation: craft-published-breathe 2.6s ease-in-out infinite; }
.studio-state--published::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  margin-right: 6px; border-radius: 50%; vertical-align: .12em;
  background: currentColor; animation: craft-published-breathe 2.6s ease-in-out infinite;
}
@keyframes craft-published-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.journal-status-tabs a:focus-visible::after { transform: scaleX(.65); opacity: .8; }
.journal-status-tabs a[aria-current="page"]:focus-visible::after { transform: scaleX(1); opacity: 1; }
.reading-toc a { position: relative; border-left-color: transparent; }
.reading-toc a::before {
  content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px;
  width: 2px; background: var(--craft-lime); transform: scaleY(0);
  transform-origin: center top; transition: transform 220ms var(--craft-ease);
  pointer-events: none;
}
.reading-toc a.toc-on::before { transform: scaleY(1); }
.reading-toc a.toc-on { border-left-color: transparent; }
/* Blog skins keep their own article gesture. Only the course/data rows above
   have a fixed baseline; do not turn that rule into a whole-site animation ban. */

/* Tree notes remain opaque paper; the existing forest and bottle assets remain visible. */
.wh-note, .wh-sheet, .wh-tree-card {
  box-shadow: inset 0 1px 0 rgba(231, 244, 240, .07);
}
.wh-note-meta, .wh-section-head { border-color: var(--craft-line); }
.wh-page .wh-section-head { padding-bottom: 10px; border-bottom: 1px solid var(--craft-line); }
.wh-page .wh-mine-row { padding-left: 8px; transition: background-color var(--craft-hover) ease; }
.wh-page .wh-mine-row:hover { padding-left: 8px; }
.wh-page .wh-sheet[data-craft-count-near] { border-color: rgba(201, 163, 95, .48); transition: border-color 180ms ease; }
.wh-page .wh-sheet[data-craft-count-near] [data-charcount-out] { color: var(--craft-gold); }
.wh-page .wh-sheet[data-craft-count-limit] { border-color: rgba(239, 171, 150, .68); }
.wh-page .wh-sheet[data-craft-count-limit] [data-charcount-out] { color: #efab96; }
/* A paper can lift, while a course/data row stays on the baseline. These
   transforms only exist during direct pointer/focus interaction; no layers
   are promoted for the whole list, and there is no global card tilt loop. */
.wh-page .wh-tree-card:not([data-tilt]),
#main-content .path-public-workspace .path-term {
  transition: border-color 180ms ease, box-shadow 320ms var(--craft-ease), transform 320ms var(--craft-ease);
}
.wh-page .wh-tree-card:not([data-tilt]):focus-within,
#main-content .path-public-workspace .path-term:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ny-text) 8%, transparent);
}
.workspace-page .desktop-launcher .desktop-icon svg {
  transition: transform 380ms cubic-bezier(.2,.86,.3,1.16);
}
.workspace-page .desktop-launcher:focus-visible .desktop-icon svg { transform: translateY(-3px) rotate(-4deg); }
@media (hover: hover) and (pointer: fine) {
  .wh-page .wh-tree-card:not([data-tilt]):hover,
  #main-content .path-public-workspace .path-term:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--ny-text) 8%, transparent); }
  .workspace-page .desktop-launcher:hover .desktop-icon svg { transform: translateY(-3px) rotate(-4deg); }
}
.writer-outline-item:hover { padding-left: 10px; }
.writer-outline-l2:hover { padding-left: 22px; }
.writer-outline-l3:hover, .writer-outline-l4:hover,
.writer-outline-l5:hover, .writer-outline-l6:hover { padding-left: 38px; }
.writer-outline-item { transition-property: background-color, color, border-color; }
.wh-bottle-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--paper-2, var(--ny-surface, #13242c));
  color: var(--ink-0, var(--ny-text));
  transition: border-color var(--craft-hover) ease, box-shadow var(--craft-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .wh-bottle-card:hover { border-color: rgba(145, 210, 221, .45); box-shadow: 0 8px 22px rgba(0, 0, 0, .13); }
}

/* Open-source cards read as catalog entries; the existing growth drawing is retained. */
.projects-heading { padding-bottom: 24px; border-bottom: 1px solid rgba(201, 163, 95, .28); }
.projects-count strong, .projects-result { font-variant-numeric: tabular-nums; }
.projects-result { padding: 0 3px 9px; border-bottom: 1px solid var(--craft-line); }
.project-card { border-radius: 10px; background: var(--ny-surface, #12212b); transition: border-color var(--craft-hover) ease, background-color var(--craft-hover) ease; }
.project-card:hover { background: color-mix(in srgb, var(--ny-surface, #12212b) 93%, var(--craft-ice)); }
.project-card-meta { font-variant-numeric: tabular-nums; }
.project-card-footer { box-shadow: inset 0 1px 0 rgba(201, 163, 95, .08); }
.project-card:focus-within { border-color: var(--craft-ice); }
html[data-theme="light"] .project-card { border-color: var(--ny-line); color: var(--ny-text); }
html[data-theme="light"] .project-card :is(.project-repository, .project-card-intro, dd) { color: var(--ny-text); }
html[data-theme="light"] .project-card :is(h2, .project-card-meta, dt, .project-attribution, .project-card-footer>span) { color: var(--ny-muted); }
html[data-theme="light"] .project-card :is(.project-card-facts, .project-card-footer) { border-color: var(--ny-line); }
html[data-theme="light"] .project-card-footer { background: #eef2eb; }
html[data-theme="light"] .project-card-footer a { color: var(--ny-accent); }
html[data-theme="light"] .projects :is(.projects-heading h1, .projects-count strong) { color: var(--ny-text); }
html[data-theme="light"] .projects :is(.projects-heading p:not(.projects-kicker), .projects-count, .projects-result, .project-filters label) { color: var(--ny-muted); }
html[data-theme="light"] .projects .project-filters { background: #eef1ec; border-color: var(--ny-line); }
html[data-theme="light"] .projects .project-filters :is(input, select) { background: var(--ny-surface); border-color: var(--ny-line); color: var(--ny-text); color-scheme: light; }
html[data-theme="light"] .projects .project-filters button { background: var(--ny-accent); color: var(--ny-accent-ink); }
html[data-theme="light"] .projects .project-clear { color: var(--ny-focus); }

/* Guides are note pages. Linework stays within the page, away from controls. */
.guides-page .guides-article,
.guides-page .resource-row { transition: background-color var(--craft-hover) ease; }
.guides-page .guides-article:is(:hover, :focus-within),
.guides-page .resource-row:is(:hover, :focus-within) { background: rgba(145, 210, 221, .035); }
.guides-page .guides-article>a,
.guides-page .resource-row-content>a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guides-page .guides-meta { padding-left: 12px; border-left: 1px solid var(--craft-gold); }
.guides-page .guides-list { max-width: 880px; }
.resource-detail .journal-prose { max-width: 760px; }

/* CS uses one static circuit turn, not another moving illustration. */
.cs-feature { position: relative; }
.cs-feature::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 22px;
  border-top: 1px solid rgba(145, 210, 221, .35);
  border-right: 1px solid rgba(145, 210, 221, .35);
  border-radius: 0 4px 0 0;
  pointer-events: none;
}
.cs-resource-group>header { border-bottom-color: rgba(145, 210, 221, .32); }
.cs-resource-group>header h3 { padding-left: 12px; border-left: 2px solid var(--craft-ice); }
.cs-resource-row:is(:hover, :focus-within) { background: rgba(145, 210, 221, .035); }
.cs-tabs>a { transition: color var(--craft-hover) ease; }
.cs-resource-row h4 a>span { transition-duration: var(--craft-hover); }

/* Management is an instrument: numeric changes and decisions are precise. */
.rq-count, .rq-ver, .rq-rule, .rq-row time,
.manage-workload-number, .steward-metrics dd, .ra-shell td { font-variant-numeric: tabular-nums; }
.rq-list .rq-row { padding-left: 6px; }
.rq-list .rq-row:hover { padding-left: 6px; }
.rq-counts { border-bottom: 1px solid var(--craft-line); }
.rq-row:focus-visible, .manage-workload-link:focus-visible { outline: 2px solid var(--craft-ice); outline-offset: 3px; }
.manage-workload-link { transition: border-color var(--craft-hover) ease, background-color var(--craft-hover) ease; }
.manage-workload-link:hover { transform: none; background: #192e33; }
html[data-theme="light"] .manage-workload-link:hover { background: #e5eddf; }
.manage-home .manage-main-link, .manage-home .manage-main-link:hover { padding-left: 7px; }
.manage-workload-number[data-craft-updated] { animation: craft-value var(--craft-state) ease; }
@keyframes craft-value { 50% { color: var(--craft-ice); } }
[data-workspace-owner] [data-inbox-count][data-craft-inbox-updated] {
  animation: craft-inbox-count 280ms ease-out;
}
@keyframes craft-inbox-count { 50% { color: var(--craft-ice); } }
.inbox-sheet .inbox-tabs a { position: relative; }
.inbox-sheet .inbox-tabs a::after {
  content: ""; position: absolute; left: calc(50% - 7px); bottom: 2px;
  width: 14px; height: 1px; background: var(--craft-lime);
  transform: scaleX(0); transition: transform 180ms var(--craft-ease);
  pointer-events: none;
}
.inbox-sheet .inbox-tabs a:is(:hover,:focus-visible)::after { transform: scaleX(.7); }
.inbox-sheet .inbox-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.cs-tabs>a::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--craft-lime); transform: scaleX(0);
  transform-origin: left center; transition: transform 200ms var(--craft-ease);
  pointer-events: none;
}
.cs-tabs>a:is(:hover,:focus-visible)::after { transform: scaleX(.65); }
.cs-tabs>a[aria-current]::after { transform: scaleX(1); }

/* Business scripts own requests and outcomes. This layer only makes their state visible. */
[data-catalog-results][aria-busy="true"],
form[data-async-filter] ~ [aria-busy="true"],
#resources-results[aria-busy="true"],
#alice-queue-results[aria-busy="true"] { box-shadow: inset 0 2px 0 var(--craft-ice); }
form[data-craft-submitting="true"] :is(button[type="submit"], input[type="submit"]) {
  cursor: progress;
  box-shadow: inset 0 -2px 0 var(--craft-ice);
}
form[data-craft-submitting="true"] button[type="submit"]::after { content: " · 提交中"; font-size: .86em; }
.ny-filter-feedback:not(.sr-only), [data-catalog-notice]:not([hidden]) { border-left: 2px solid var(--craft-gold); }
[data-craft-results-updated] { animation: craft-results var(--craft-state) var(--craft-ease); }
@keyframes craft-results { from { opacity: .75; transform: translateY(3px); } to { opacity: 1; transform: none; } }
[data-catalog-results] { position: relative; }
[data-catalog-results][aria-busy="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; background: linear-gradient(90deg,transparent,var(--ny-focus),transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: craft-search-pending 900ms ease-in-out infinite; pointer-events: none; }
@keyframes craft-search-pending { from { background-position: -65% 0; } to { background-position: 165% 0; } }
input[data-craft-invalid], select[data-craft-invalid], textarea[data-craft-invalid] {
  animation: craft-invalid 420ms ease-out;
}
@keyframes craft-invalid { 50% { box-shadow: 0 0 0 2px rgba(239, 171, 150, .78); } }

/* Internship rows are a dense, immediately readable index; the existing sky
   and handwritten heading stay in their own visual layer. */
.career-reference-page .career-list-labels { border-bottom-color: rgba(145, 210, 221, .3); }
.career-reference-page .career-row { transition: background-color var(--craft-hover) ease, box-shadow var(--craft-state) ease; }
.career-reference-page .career-row.is-selected { box-shadow: inset 3px 0 var(--craft-lime); }
.career-reference-page .career-record-date { font-variant-numeric: tabular-nums; }
.career-reference-page .career-preview { background: var(--ny-surface, #102033); }
.career-reference-page .career-preview[aria-busy="true"]::after { animation-duration: 950ms; }
.career-bookmark[data-craft-save-confirmed] .career-icon {
  animation: craft-bookmark-confirm 400ms cubic-bezier(.16, .78, .24, 1);
  transform-origin: center;
}
@keyframes craft-bookmark-confirm {
  38% { transform: scale(1.18); }
  100% { transform: none; }
}

/* Enhanced selects replace the native kind/date/status/sort controls. The
   picker is appended to body (outside .intern-shell), so it needs its own
   light ink rather than inheriting the shell's scoped text tokens. */
html[data-theme="light"] .career-reference-page .career-filters .ny-select > .ny-select-trigger {
  background: #f8fcff;
  border-color: #7c9fbd80;
  color: #1b3046;
}
html[data-theme="light"] .career-reference-page .career-filters .ny-select > .ny-select-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: #eaf3fc;
  border-color: #6f9dbe;
  color: #1b3046;
}
html[data-theme="light"] body.career-reference-page > .ny-picker {
  background: #f8fcff;
  border-color: #7c9fbd80;
  color: #1b3046;
}
html[data-theme="light"] body.career-reference-page > .ny-picker .ny-picker-filter input {
  background: #fff;
  border-color: #7c9fbd80;
  color: #1b3046;
}
html[data-theme="light"] body.career-reference-page > .ny-picker .ny-picker-filter input::placeholder { color: #526c84; }
html[data-theme="light"] body.career-reference-page > .ny-picker .ny-picker-options button { color: #1b3046; }
html[data-theme="light"] body.career-reference-page > .ny-picker .ny-picker-options button:is(:hover, :focus-visible) { background: #eaf3fc; }
html[data-theme="light"] body.career-reference-page > .ny-picker .ny-picker-options button[aria-pressed="true"] { background: #e1edce; color: #1b3046; }
html[data-theme="light"] body.career-reference-page > .ny-picker :is(.ny-picker-group, .ny-picker-empty) { color: #526c84; }

@media (max-width: 640px) {
  .course-workspace-page .asset-row { padding-inline: 13px; }
  .journal-list .journal-article-row::before { top: 13px; bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .journal-post-state--published::before,.studio-state--published::before { animation: none!important; opacity: 1; }
  #main-content .journal-public-index .journal-article-link h2,
  .catalog-row .catalog-row-arrow { transition: none; transform: none !important; }
  .wh-page .wh-tree-card, #main-content .path-public-workspace .path-term,
  .workspace-page .desktop-launcher .desktop-icon svg { transition: none; transform: none !important; }
  :is(.catalog-row,.asset-row,.journal-article-row,.wh-bottle-card,.project-card,
      .guides-article,.resource-row,.cs-tabs>a,.manage-workload-link) { transition: none !important; }
  .manage-workload-number[data-craft-updated], [data-craft-results-updated] { animation: none !important; }
  .career-bookmark[data-craft-save-confirmed] .career-icon { animation: none !important; }
  .path-course[data-craft-located] { animation: none !important; }
  [data-workspace-owner] [data-inbox-count][data-craft-inbox-updated] { animation: none !important; }
  input[data-craft-invalid], select[data-craft-invalid], textarea[data-craft-invalid] { animation: none !important; }
  .reading-toc a::before, .inbox-sheet .inbox-tabs a::after,
  .cs-tabs>a::after, .journal-status-tabs a::after,
  .wh-page .wh-sheet[data-craft-count-near] { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(nylon-header), ::view-transition-new(nylon-header) { animation: none !important; }
  ::view-transition-group(nylon-course-task), ::view-transition-old(nylon-course-task), ::view-transition-new(nylon-course-task) { animation: none !important; }
  ::view-transition-group(nylon-management-location), ::view-transition-old(nylon-management-location), ::view-transition-new(nylon-management-location) { animation: none !important; }
  [data-catalog-results][aria-busy="true"]::before { animation: none; background: var(--ny-focus); }
}
@media (forced-colors: active) {
  .catalog-list .catalog-row::before, .course-workspace-page .asset-row::before,
  .journal-list .journal-article-row::before { background: Highlight; }
  .reading-toc a::before, .inbox-sheet .inbox-tabs a::after,
  .cs-tabs>a::after { background: Highlight; }
  [data-catalog-results][aria-busy="true"], #resources-results[aria-busy="true"],
  #alice-queue-results[aria-busy="true"] { outline: 2px solid Highlight; }
}