/* ============================================================================
   AutoSEO — Flagship theme layer (release 1).
   Recolours + refines the existing shell into the forest-green flagship look.
   Loaded AFTER the base styles in head(); remove the <link> line to revert.
   Structure/markup is untouched — this is colour, surface and polish only.
   ============================================================================ */
:root{
  --paper:#f4f2ec; --ink:#18201c; --line:#e7e3d9;
  --green:#1f7a5a; --red:#b0562e; --amber:#a9781a;
  --forest:#12352a; --forest-2:#1c5540; --mint:#8fd3b4; --sage:#5aa886;
}
body{background:var(--paper);color:var(--ink)}

/* Headings + accents settle onto the brand green */
h1,h2{color:var(--forest)}
.folio{color:var(--sage)}
.crumb a{color:var(--sage)}

/* Cards: trade the heavy ink border for a soft hairline + layered shadow */
.card,.scard{border:1px solid var(--line)!important;background:#fffefa!important;border-radius:16px!important;
  box-shadow:0 1px 2px rgba(24,32,28,.05),0 8px 22px rgba(24,32,28,.055)!important}
.actionbar{border:1px solid var(--line)!important;background:#fffefa!important;border-radius:14px!important;
  box-shadow:0 1px 2px rgba(24,32,28,.05)!important}
.stat{border:1px solid var(--line)!important;background:#fffefa!important;border-radius:14px!important}
.stat.good{border-color:#bfe3d1!important}.stat.warn{border-color:#efd9a6!important}.stat.bad{border-color:#eab9a3!important}
.stat.good .n{color:var(--green)!important}.stat.warn .n{color:var(--amber)!important}.stat.bad .n{color:var(--red)!important}

/* Primary buttons: forest gradient with a soft lift */
.btn{background:linear-gradient(180deg,var(--forest-2),var(--forest))!important;border-radius:10px!important;
  box-shadow:0 4px 12px rgba(18,53,42,.22)!important}
.btn.ghost{background:#fffefa!important;color:var(--forest)!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(24,32,28,.05)!important}
.btn.red{background:var(--red)!important}

/* Icon rail: navy → forest green, mint active state + a subtle glow wash */
.rail{background:var(--forest)!important;
  background-image:radial-gradient(120% 55% at 0% 0%,rgba(143,211,180,.14),transparent 60%)!important}
.rail .rlogo{background:linear-gradient(150deg,var(--mint),var(--sage))!important;color:#08301f!important}
.rail .ric{color:#a9c6ba!important}
.rail .ric:hover{background:rgba(255,255,255,.06)!important;color:#eafff6!important}
.rail .ric.on{background:rgba(143,211,180,.16)!important;color:#fff!important}
.rail .raildiv{color:#6f9d8b!important;border-top-color:rgba(143,211,180,.22)!important}

/* Project sidebar: green accents on hover/active */
.side a:hover{background:#f0f6f2!important;color:var(--forest)!important}
.side a.on{background:#e7f2ec!important;color:var(--forest)!important}
.side a.on svg{opacity:1}
.side .sctx,.side .pjsel,.side .sbrand{color:var(--forest)!important}

/* Tool pills (hnav) + admin pills: refined, forest active */
.hnav a{background:#fffefa!important;border:1px solid var(--line)!important;border-radius:10px!important}
.hnav a:hover{border-color:var(--sage)!important;color:var(--forest)!important}
.hnav a.on{background:var(--forest)!important;border-color:var(--forest)!important;color:#fff!important;box-shadow:0 3px 9px rgba(18,53,42,.2)!important}
.an-item:hover{border-color:var(--sage)!important;color:var(--forest)!important}
.an-item.on{background:var(--forest)!important;border-color:var(--forest)!important}
.subnav{background:rgba(244,242,236,.94)!important}
.subnav a:hover{background:#e7efe9!important;color:var(--forest)!important}

/* Top-right identity: forest avatar + project chip */
.topuser .av{background:var(--forest)!important}
.topuser .who,.topuser .out{border-color:var(--line)!important;background:#fffefa!important}
.topuser .out:hover{background:var(--forest)!important;border-color:var(--forest)!important}
.topuser .topproj{background:var(--forest)!important;border-color:var(--forest)!important}
.topuser .topproj:hover{background:var(--forest-2)!important;border-color:var(--forest-2)!important}
.topuser .topproj .tp-lab,.topuser .topproj .tp-sw{color:var(--mint)!important}

/* Tables + tags soften onto the palette */
table{border:1px solid var(--line)!important}
th{background:#eef2ee!important;color:var(--forest)!important}
.pill{background:var(--forest)}

/* ═══════════════════════════════════════════════════════════════════════════
   feature-382 · THE INSTRUCTION AND INFORMATION PANEL, EVERYWHERE.

   The owner, 2 September: "Instruction box is again a plain text box and it get
   mixed up with everything else. We planned to make these boxes colourful so
   the user can differentiate. (i) badge on any information box would make it
   easier to understand. The instruction box are not fully stretched, lets use a
   different font and make it italic whereever the information goes."

   ⚠️ THIS IS ITEM 16 — the Rule Book was enforced on the Connections page ONLY,
   and the plan page therefore had bare prose where Connections had a labelled
   blue panel. He noticed, twice. Putting it in theme.css is what makes it
   available to every page instead of the one that happens to define it.

   §3a, and nothing here may take a second meaning:
     BLUE  .ins        instructions — something for YOU to do
     AMBER .ins.warn   started but not finished, or a caution
     PLAIN .ins.note   information you do not have to act on
   ⚠️ NO RED. Red means something that worked has stopped, and a panel of prose
   is never that.

   The badge, the italic serif and the full width are all his, and all three do
   the same job: make a box that is not body text look like a box that is not
   body text at half a glance.
   ═══════════════════════════════════════════════════════════════════════════ */
.ins{position:relative;display:block;width:100%;box-sizing:border-box;
  margin:12px 0;padding:13px 16px 13px 44px;border-radius:10px;
  background:#f2f6fc;border:1px solid #c6d6ea;border-left:4px solid #4a72a8;
  font:italic 14.5px/1.62 'Iowan Old Style',Georgia,'Times New Roman',serif;color:#25384c}
.ins>b,.ins>.ins-h{display:block;font-style:normal;
  font:700 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#3a5d8c;margin:0 0 6px}
.ins p{margin:0 0 .55em;font-style:italic;color:inherit;font-size:inherit;line-height:inherit}
.ins p:last-child{margin:0}
.ins b:not(:first-child),.ins strong{font-style:normal;font-weight:700;color:inherit}
.ins a{color:#2c5580}
.ins::before{content:'i';position:absolute;left:14px;top:13px;width:20px;height:20px;
  border-radius:50%;background:#3a5d8c;color:#fff;text-align:center;
  font:700 12.5px/20px Georgia,serif;font-style:normal}
.ins ol,.ins ul{margin:8px 0 0;padding-left:20px;font-style:italic}
.ins li{margin:0 0 6px}
/* AMBER — started, not finished. Never green, never red. */
.ins.warn{background:#fffdf6;border-color:#e8d5a4;border-left-color:#c79a2e;color:#4a3a12}
.ins.warn>b,.ins.warn>.ins-h{color:#8a6512}
.ins.warn::before{content:'!';background:#a97d16}
.ins.warn a{color:#7a5c07}
/* PLAIN — information, not an instruction, and not a problem. */
.ins.note{background:#f6f4ed;border-color:#ded8c8;border-left-color:#9b917a;color:#3f473f}
.ins.note>b,.ins.note>.ins-h{color:#6f6a58}
.ins.note::before{content:'?';background:#6f6a58}
.ins.note a{color:#3d6a52}