/* sa-flow.css: shared figure primitives in the software stack's "stack card" language.
   Used by /resources/finance-department first; the other flowchart pages adopt it in later rounds.
   /resources/software-stack keeps its own scoped .ss rules until it migrates.

   Everything here is prefixed .sf- (not .flow-, which the bookkeeping-process ladder already uses) so it can't collide with page rules. Layout (how many
   columns, where a connector sits) belongs to the page; this file only says what the pieces
   look like. Brand gold stays #E0A91F everywhere: no darker gold for text. Connector labels and
   numerals use stone greys instead, so they stay readable without changing the gold. */

.sf-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 40%, #F4F0E8 100%);
  border: 1px solid #E5DFD4; border-radius: 18px;
  padding: clamp(18px, 3vw, 40px); overflow: hidden;
}
.sf-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #E0A91F, #074F69 52%, #B83229);
}
.sf-card-head { text-align: center; margin: 0 0 clamp(20px, 2.6vw, 30px); }
.sf-eyebrow {
  display: inline-block; margin: 0; font: 600 0.72rem/1.4 "Inter", sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #3A3530;
}
.sf-eyebrow strong { color: #074F69; font-weight: 600; }

/* a dashed container for a set of tiles */
.sf-group { background: rgba(255, 255, 255, .6); border: 1px dashed #D8D0C2; border-radius: 14px; padding: 16px; }
.sf-group--core { border-color: rgba(7, 79, 105, .35); background: linear-gradient(180deg, rgba(7, 79, 105, .05), rgba(255, 255, 255, .6)); }
.sf-label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 600 0.7rem/1.35 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6B645C;
}
.sf-label::after { content: ""; flex: 1; height: 1px; background: #E5DFD4; }
.sf-group--core > .sf-label { color: #074F69; }

/* tiles: a white card that lifts on hover. Buttons, so the whole tile is the target. */
.sf-tile {
  appearance: none; -webkit-appearance: none; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: #FFFFFF; border: 1px solid #E5DFD4; border-radius: 12px; padding: 14px;
  box-shadow: 0 1px 2px rgba(4, 42, 58, .05), 0 2px 8px rgba(4, 42, 58, .04);
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1), box-shadow 220ms cubic-bezier(.2, .7, .3, 1),
              border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.sf-tile:hover { transform: translateY(-2px); border-color: rgba(7, 79, 105, .45); box-shadow: 0 10px 28px rgba(4, 42, 58, .12), 0 2px 6px rgba(4, 42, 58, .06); }
.sf-tile:active { transform: translateY(0); }
.sf-tile:focus-visible { outline: 3px solid #E0A91F; outline-offset: 2px; }

/* the hub: the one tile everything else feeds or reads from */
.sf-tile--hub { border: 2px solid #074F69; box-shadow: 0 0 0 6px rgba(224, 169, 31, .16), 0 10px 28px rgba(4, 42, 58, .12), 0 2px 6px rgba(4, 42, 58, .06); }
.sf-tile--hub:hover { border-color: #074F69; }

/* step numeral + step name. #968B7D is the lightest stone that still clears 3:1 at this size. */
.sf-num { font: italic 500 2rem/1 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: #968B7D; }
.sf-name { font: 600 0.74rem/1.2 "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #074F69; }

/* icons: a navy disc with a gold glyph, or a bare gold glyph beside a numeral */
.sf-ico {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: #E0A91F; background: radial-gradient(circle at 35% 30%, #074F69, #042A3A);
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(224, 169, 31, .55);
}
.sf-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-glyph { width: 20px; height: 20px; flex: none; fill: none; stroke: #E0A91F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the + in the corner: "this opens" */
.sf-more {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid #E5DFD4; background: #FFFFFF; color: #074F69;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sf-more svg { width: 12px; height: 12px; transition: transform 220ms cubic-bezier(.2, .7, .3, 1); }
.sf-tile:hover .sf-more { background: #074F69; border-color: #074F69; color: #E0A91F; }

/* who runs it */
.sf-pill {
  display: inline-block; max-width: 100%; padding: 4px 9px; border-radius: 999px;
  font: 600 0.7rem/1.3 "Inter", sans-serif; letter-spacing: .01em;
  background: #F4F0E8; border: 1px solid #E5DFD4; color: #053A4E;
}
/* how often it happens */
.sf-badge {
  display: inline-grid; place-items: center; height: 20px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  font: 700 0.62rem/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: #E0A91F; color: #042A3A;
}
.sf-badge--soft { background: #F4F0E8; border: 1px solid #E5DFD4; color: #053A4E; }

/* connectors: a dashed gold line with an arrowhead and a small-caps label */
.sf-conn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.sf-conn-label { position: relative; font: 600 0.62rem/1.35 "Inter", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6B645C; }
.sf-conn--v { min-height: 64px; }
.sf-conn--v::before {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 12px; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(180deg, #E0A91F 0 6px, transparent 6px 11px);
}
.sf-conn--v::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 12px; height: 10px; margin-left: -6px;
  background: #E0A91F; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sf-conn--v .sf-conn-label { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); text-align: left; max-width: calc(50% - 20px); }
.sf-conn--h { min-height: 44px; }
.sf-conn--h::before {
  content: ""; position: absolute; left: 6px; right: 12px; top: 50%; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, #E0A91F 0 6px, transparent 6px 11px);
}
.sf-conn--h::after {
  content: ""; position: absolute; right: 3px; top: 50%; width: 10px; height: 12px; margin-top: -6px;
  background: #E0A91F; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* the label sits above the line; -50% - 10px keeps a two- or three-line label clear of it too */
.sf-conn--h .sf-conn-label { transform: translateY(calc(-50% - 10px)); text-align: center; }

/* "live" connectors: the dashes drift in the direction of flow */
@media (prefers-reduced-motion: no-preference) {
  .sf-conn--live.sf-conn--v::before { animation: sf-run-v 1.4s linear infinite; }
  .sf-conn--live.sf-conn--h::before { animation: sf-run-h 1.4s linear infinite; }
}
@keyframes sf-run-v { from { background-position: 0 0; } to { background-position: 0 11px; } }
@keyframes sf-run-h { from { background-position: 0 0; } to { background-position: 11px 0; } }

/* a horizontal connector in a row that stacks below 1000px: it turns to point down, with its label beside it */
@media (max-width: 999px) {
  .sf-conn--turn { min-height: 64px; }
  .sf-conn--turn::before {
    left: 50%; right: auto; top: 4px; bottom: 12px; width: 2px; height: auto; margin: 0 0 0 -1px;
    background: repeating-linear-gradient(180deg, #E0A91F 0 6px, transparent 6px 11px);
  }
  .sf-conn--turn::after { left: 50%; right: auto; top: auto; bottom: 3px; width: 12px; height: 10px; margin: 0 0 0 -6px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .sf-conn--turn .sf-conn-label { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); text-align: left; max-width: calc(50% - 20px); white-space: normal; }
}
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .sf-conn--turn.sf-conn--live::before { animation-name: sf-run-v; }
}

/* a connector that joins rather than leads ("and", "or"): no arrowhead, and the label sits on the line */
.sf-conn--join::after { display: none; }
.sf-conn--join.sf-conn--h::before { left: 4px; right: 4px; }
.sf-conn--join .sf-conn-label, .sf-conn--join.sf-conn--h .sf-conn-label {
  position: relative; transform: none; padding: 4px 10px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid #E5DFD4; color: #074F69; letter-spacing: .14em;
}
@media (max-width: 999px) {
  .sf-conn--join.sf-conn--turn::before { left: 50%; right: auto; bottom: 4px; }
  .sf-conn--join.sf-conn--turn .sf-conn-label { position: relative; left: auto; top: auto; transform: none; max-width: none; }
}