/* FrameForge design tokens + mat-bevel component system */
:root {
  --walnut: #201B16;
  --walnut-2: #2C251E;
  --paper: #F7F4EE;
  --card: #FFFFFF;
  --gilt: #B8862E;
  --gilt-dark: #96691C;
  --bevel: #D9CFBB;
  --ink: #2A2620;
  --ink-soft: #6E6557;
  --line: #E7E1D4;
  --ok: #4E7A4E;
  --warn: #A8541F;
  --bad: #9B3535;
}

html { font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--ink); }
body { background: var(--paper); }

.font-display { font-family: 'Fraunces', Georgia, serif; }
.font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* The signature: a matted panel. Outer frame line + offset bevel hairline,
   like the bevel cut of a mat window. */
.mat-card {
  background: var(--card);
  border: 1px solid var(--bevel);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(32, 27, 22, 0.07);
  position: relative;
}
.mat-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: 1px;
  pointer-events: none;
  /* Painted above content — it's only a hairline in the padding zone and it
     must not force children into stacking contexts (that buried dropdowns). */
  z-index: 2;
}
/* A card the user is typing in rises above sibling cards so its search
   dropdowns are never painted under the next panel. */
.mat-card:focus-within { z-index: 30; }
.mat-pad { padding: 1.5rem; }

.eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .875rem; padding: .625rem 1.125rem;
  border-radius: 2px; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-gilt { background: var(--gilt); color: #fff; }
.btn-gilt:hover { background: var(--gilt-dark); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--bevel); }
.btn-quiet:hover { border-color: var(--gilt); color: var(--gilt-dark); }
.btn-danger { background: transparent; color: var(--bad); border-color: var(--bevel); }
.btn-danger:hover { border-color: var(--bad); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--gilt); outline-offset: 2px;
}

.field { display: block; width: 100%; padding: .55rem .7rem; font-size: .9rem;
  background: #fff; border: 1px solid var(--bevel); border-radius: 2px; color: var(--ink); }
.field:focus { border-color: var(--gilt); }
label.lbl { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-soft);
  margin-bottom: .3rem; }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: .5rem .75rem; border-bottom: 1px solid var(--bevel); }
.tbl td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
.tbl tr:hover td { background: #FBF9F4; }

.pill { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid; }
.pill-quote { color: #6E6557; border-color: #D9CFBB; background: #F5F2EA; }
.pill-approved { color: #275D8C; border-color: #B9D2E4; background: #EFF6FB; }
.pill-materials_ordered { color: #7A5B17; border-color: #E2CD96; background: #FAF4E3; }
.pill-in_production { color: #6A4A94; border-color: #D4C4EA; background: #F6F1FC; }
.pill-ready { color: #2F6B2F; border-color: #BAD8BA; background: #EFF8EF; }
.pill-completed { color: #4C463C; border-color: #D9CFBB; background: #F1EEE6; }
.pill-canceled { color: #9B3535; border-color: #E4C2C2; background: #FBF0F0; }

/* Sidebar (rendered by common.js) */
.ff-shell { display: flex; min-height: 100vh; }
.ff-side {
  width: 232px; flex-shrink: 0; background: var(--walnut); color: #CFC6B8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.ff-side .brand { font-family: 'Fraunces', serif; font-size: 1.35rem; color: #fff;
  padding: 1.35rem 1.25rem 1rem; letter-spacing: .01em; }
.ff-side .brand span { color: var(--gilt); }
.ff-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem 1.25rem;
  font-size: .875rem; color: #CFC6B8; text-decoration: none; border-left: 3px solid transparent; }
.ff-nav a:hover { color: #fff; background: var(--walnut-2); }
.ff-nav a.active { color: #fff; border-left-color: var(--gilt); background: var(--walnut-2); }
.ff-nav .navsec { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: #857A69; padding: 1rem 1.25rem .35rem; }
.ff-main { flex: 1; min-width: 0; padding: 2rem 2.25rem 4rem; }

@media (max-width: 860px) {
  .ff-shell { flex-direction: column; }
  .ff-side { width: 100%; height: auto; position: static; flex-direction: row;
    align-items: center; overflow-x: auto; }
  .ff-side .brand { padding: .8rem 1rem; font-size: 1.1rem; white-space: nowrap; }
  .ff-nav { display: flex; }
  .ff-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap;
    padding: .8rem .8rem; }
  .ff-nav a.active { border-bottom-color: var(--gilt); }
  .ff-nav .navsec { display: none; }
  .ff-main { padding: 1.25rem 1rem 3rem; }
}

.ff-nav a svg { flex-shrink: 0; opacity: .65; }
.ff-nav a.active svg, .ff-nav a:hover svg { opacity: 1; }

/* Feedback widget */
#ff-fb-btn { position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 55;
  background: var(--walnut); color: #CFC6B8; border: 1px solid #4A4136;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: 999px; cursor: pointer; }
#ff-fb-btn:hover { color: #fff; border-color: var(--gilt); }
#ff-fb-modal { display: none; position: fixed; inset: 0; z-index: 56;
  background: rgba(32,27,22,.55); align-items: center; justify-content: center; padding: 1rem; }

/* Toast */
#ff-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--walnut); color: #fff; padding: .7rem 1.3rem; border-radius: 2px;
  font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 60;
  border-left: 3px solid var(--gilt); max-width: 90vw; }
#ff-toast.show { opacity: 1; }
#ff-toast.err { border-left-color: var(--bad); }

.money { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}