/* ==========================================================================
   NEGUSTOLONOW — site/css/process.css
   process.html only: the order of work, NINTH FLOOR, two short lists, the ledger.
   Every class is prefixed .process- ; every override of a shared class is scoped under
   body[data-page="process"]. Tokens only: no new colour values, no radius, no shadow, no gradient.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE TYPE RULE (stated in full in css/house.css). Display scale carries a NAME
   or a NUMBER out of a world. It never carries an abstract noun.

   This file used to break that rule harder than anywhere else on the site: the
   order of work was set as a staircase of words at --t-giant and --t-mega, so
   that IDEA, ARTIFICIAL WORLD and ART were the largest type in the house. Read
   at body size they are a slide from a deck. They are now set as what they are,
   a numbered order of work, at reading size; the page's largest type is the
   ledger, which is a thing, and the thread numbers, which are numbers. The h1
   was also at --t-mega and is not a name either; it is set at headline scale.
   --------------------------------------------------------------------------- */

/* 1. THE ORDER OF WORK -------------------------------------------------------- */
.process-method { padding-bottom: var(--s-7); }
.process-method__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: var(--t-title); letter-spacing: 0.06em; line-height: 1; }
.process-method__intro { margin-top: var(--s-5); }

/* the order of work: a numbered list of things somebody does, ruled off */
.process-chain { display: grid; margin-top: var(--s-7); max-width: 44rem; border-top: var(--rule) solid var(--line); }
.process-chain__step { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; column-gap: var(--s-3); padding-block: 0.75rem; border-bottom: var(--rule-hair) solid var(--hair); min-width: 0; }
.process-chain__no { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); }
.process-chain__term { display: block; font-size: 1.08rem; line-height: 1.45; overflow-wrap: anywhere; }
.process-chain__arrow { display: none; }
.process-chain__note { display: block; grid-column: 2; margin-top: var(--s-1); font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }

/* 2. THE MACHINE -------------------------------------------------------------- */
body[data-page="process"] .process-machine { padding-block: var(--s-8); }
body[data-page="process"] .process-machine .room__head { margin-bottom: var(--s-6); }
.process-typed-lede { font-family: var(--f-mono); font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.01em; max-width: 40rem; }

/* what it remembers: a short index, name and count */
.process-memory__h { margin-bottom: var(--s-3); }
.process-memory { border-top: var(--rule) solid var(--line); }
.process-memory__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: 0.5rem 0.45rem; border-bottom: var(--rule-hair) solid var(--hair); }
.process-memory__name { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; text-decoration: none; }
a.process-memory__name:hover, a.process-memory__name:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.process-memory__count { font-family: var(--f-mono); font-size: var(--t-small); color: var(--ink-soft); }

/* rules, and things left out: two plain lists */
.process-house .title { margin-bottom: var(--s-4); }
.process-rules { counter-reset: prule; border-top: var(--rule) solid var(--line); }
.process-rule { counter-increment: prule; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; padding-block: 0.6rem; border-bottom: var(--rule-hair) solid var(--hair); font-size: 1rem; line-height: 1.4; }
.process-rule::before { content: counter(prule, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-faint); }
.process-rule:target { box-shadow: inset 4px 0 0 var(--accent); padding-left: var(--s-3); }
.process-refusals { border-top: var(--rule) solid var(--line); }
.process-refusals li { padding-block: 0.6rem; border-bottom: var(--rule-hair) solid var(--hair); font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }

/* 3. THE LEDGER -------------------------------------------------------------- */
body[data-page="process"] .process-ledger { padding-block: var(--s-8); }
body[data-page="process"] .process-ledger .room__head { margin-bottom: var(--s-6); }
.process-ledger__lede { max-width: 38rem; margin-bottom: var(--s-7); }

.process-tally-block { padding-top: var(--s-4); border-top: var(--rule) solid var(--line); }
.process-tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); margin-top: var(--s-4); }
@media (min-width: 48rem) { .process-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process-tally > div { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--rule-hair) solid var(--line); }
.process-tally dt { font-family: var(--f-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.process-tally dd { font-size: var(--t-large); line-height: 0.8; letter-spacing: -0.01em; }
.process-tally > div[data-dim] { color: var(--ink-faint); }

/* one mark per thread, in order */
.process-score { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s-5); border-top: var(--rule) solid var(--line); border-left: var(--rule-hair) solid var(--hair); }
@media (min-width: 48rem) { .process-score { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.process-score li { border-right: var(--rule-hair) solid var(--hair); border-bottom: var(--rule-hair) solid var(--hair); }
.process-score a { display: grid; gap: 0.3rem; min-height: 3.6rem; padding: 0.5rem 0.55rem 0.45rem; text-decoration: none; align-content: space-between; }
.process-score__no { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-soft); }
.process-score__mark { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 0.8; }
.process-score a[data-outcome="unresolved"] .process-score__mark { color: var(--accent); }
.process-score a[data-outcome="rejected"] .process-score__mark { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.process-score a:hover, .process-score a:focus-visible { background: var(--ink); color: var(--paper); }
.process-score a:hover .process-score__no, .process-score a:focus-visible .process-score__no,
.process-score a:hover .process-score__mark, .process-score a:focus-visible .process-score__mark { color: var(--paper); }

.process-filterbar { display: grid; gap: var(--s-3); margin-top: var(--s-6); padding-block: var(--s-3); background: var(--paper); border-block: var(--rule-hair) solid var(--line); }
@media (min-width: 60rem) and (min-height: 40rem) { .process-filterbar { position: sticky; top: var(--header-h); z-index: 50; } }
.process-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.process-filter__label { flex: 0 0 100%; color: var(--ink-soft); }
@media (min-width: 60rem) { .process-filter__label { flex: 0 0 auto; margin-right: var(--s-4); } }
.process-filter__btn { display: inline-flex; align-items: baseline; gap: 0.5em; min-height: 2.75rem; padding: 0.55rem 0.85rem 0.45rem; border: var(--rule-hair) solid var(--line); background: transparent; color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.process-filter__btn:hover { background: var(--paper-2); }
.process-filter__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.process-filter__n { font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0; }
.process-filter__status { color: var(--ink-soft); }
.process-filter__status:empty { display: none; }

.process-threads { margin-top: var(--s-6); }
.process-threads__empty { padding-block: var(--s-8); }
body[data-page="process"] .process-thread { padding-block: var(--s-6); scroll-margin-top: 4rem; } /* html already pads for the header; this clears the sticky filter bar */
body[data-page="process"] .process-thread .thread__no { font-size: var(--t-huge); }
.process-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.process-thread__anchor { color: var(--ink-faint); text-decoration: none; justify-self: start; }
.process-thread__anchor:hover, .process-thread__anchor:focus-visible { color: var(--accent); text-decoration: underline; }
body[data-page="process"] .thread__part .accession { font-size: 0.86em; white-space: nowrap; }
body[data-page="process"] .thread__part a { color: inherit; }
body[data-page="process"] .thread__part a:hover { color: var(--iodine-deep); }
@media (min-width: 60rem) {
  body[data-page="process"] .process-thread .thread__part--machine { margin-top: var(--s-5); }
  body[data-page="process"] .process-thread .thread__part--final { margin-top: var(--s-6); }
}

/* the name on the third sheet: the machine proposed, and a person signed */
.thread__decided { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-soft); }

.process-thread__links { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-end; padding-top: var(--s-4); border-top: var(--rule-hair) solid var(--hair); min-width: 0; }
@media (min-width: 60rem) { .process-thread > .process-thread__links { grid-column: 2; } }
.process-thread__object { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s-3); align-items: end; max-width: 22rem; text-decoration: none; }
.process-thumb { display: block; width: 100%; background: var(--paper-2); border: var(--rule-hair) solid var(--hair); overflow: hidden; }
.process-thread__objtext { display: grid; gap: 0.35rem; min-width: 0; }
.process-thread__objtext .accession { white-space: normal; line-height: 1.3; }
.process-thread__objname { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1; text-transform: uppercase; }
.process-thread__object:hover .process-thread__objname, .process-thread__object:focus-visible .process-thread__objname { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.process-thread__piece { display: grid; gap: 0.4rem; justify-items: start; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .process-filter__btn { transition: none; }
}

@media print {
  .process-filterbar, .process-thread__anchor { display: none !important; }
  .process-thread[hidden] { display: grid !important; }
  .process-chain__step { margin-left: 0 !important; }
}

/* negusto.css keeps .room__no on one line beside the heading; at phone width a long number squeezes the
   heading to a column one letter wide. On this page the number drops beneath the heading instead. */
@media (max-width: 47.99rem) {
  body[data-page="process"] .room__head { grid-template-columns: minmax(0, 1fr); }
  body[data-page="process"] .room__no { white-space: normal; }
}