:root {
  --wflo-secure-deep: #071d18;
  --wflo-secure-forest: #103a30;
  --wflo-secure-cream: #fffaf0;
  --wflo-secure-gold: #e5b94f;
  --wflo-secure-red: #bd4634;
  --wflo-secure-mint: #9fe0c4;
  --wflo-secure-line: rgba(255, 255, 255, .16);
}

/* Pine Cones uses the same public tokens and structural shell as the portal.
   Scope feature layout here: the secure CSP intentionally forbids inline CSS. */
.pine-cones-page { margin:0; line-height:1.55; }
.pine-cones-page * { box-sizing:border-box; }
.pine-skip { position:absolute; left:-9999px; padding:.8rem; z-index:200; background:var(--white); color:var(--deep); }
.pine-skip:focus { left:1rem; top:1rem; }
.pine-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:1rem clamp(1rem,4vw,3rem); }
.pine-header .secure-brand { color:var(--paper); font-size:1.5rem; }
.pine-header .secure-brand span { margin-left:.5rem; color:var(--gold); font:800 .85rem var(--sans); }
.pine-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.pine-header .secure-station-links-heading { display:none; }
.pine-header #secure-sign-out { min-height:44px; padding:.55rem .75rem; border:1px solid var(--red-dark); border-radius:.55rem; color:var(--white); background:var(--red); font:800 .8rem var(--sans); cursor:pointer; }
.pine-header nav a { display:inline-flex; align-items:center; min-height:44px; padding:.5rem .7rem; border:1px solid var(--soft); border-radius:.5rem; color:var(--paper); font-size:.8rem; font-weight:700; text-decoration:none; }
.pine-main { width:min(76rem,calc(100% - 2rem)); margin:1.3rem auto 3rem; }
.pine-main .hero,.pine-main .balance-panel,.pine-main .card,.pine-main .onboarding { padding:clamp(1rem,3vw,2rem); border:1px solid var(--line); border-radius:1.1rem; background:var(--white); box-shadow:var(--shadow); }
.pine-main .hero { color:var(--paper); background:linear-gradient(135deg,var(--forest),var(--deep)); }
.pine-main h1 { margin:.25rem 0 1rem; font:800 clamp(2rem,5vw,3.8rem)/1.08 var(--display); letter-spacing:-.04em; overflow-wrap:anywhere; }
.pine-main h2 { margin:.3rem 0 .75rem; font:750 clamp(1.25rem,3vw,1.7rem)/1.2 var(--display); }
.pine-main .eyebrow { margin:0 0 .5rem; color:var(--red-dark); font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.pine-main .hero .eyebrow { color:var(--gold); }
.pine-main .lead { max-width:75ch; margin:.7rem 0; }
.pine-main .stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:1.25rem 0 0; }
.pine-main .stat { padding:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:.75rem; overflow-wrap:anywhere; }
.pine-main .stat strong,.pine-main .stat span { display:block; }
.pine-main .stat strong { font:900 clamp(1.5rem,3vw,2rem)/1.2 var(--sans); }
.pine-main .stat span { margin-top:.35rem; font-size:.85rem; line-height:1.4; color:var(--muted); }
.pine-main .search { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.75rem; margin:1.25rem 0; padding:1rem; background:var(--white); border:1px solid var(--line); border-radius:.8rem; }
.pine-main .search label { grid-column:1/-1; font-size:.85rem; font-weight:800; }
.pine-main input,.pine-main textarea { width:100%; min-width:0; min-height:48px; padding:.75rem; border:1px solid #7b8e84; border-radius:.5rem; background:var(--white); color:var(--ink); font:inherit; }
.pine-main .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1rem; border:1px solid var(--red-dark); border-radius:.55rem; color:var(--white); background:var(--red); font:800 .9rem var(--sans); text-decoration:none; cursor:pointer; }
.pine-main a:not(.button) { color:var(--forest); text-underline-offset:.2em; }
.pine-main .pine-clear { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; }
.pine-main :is(a,button,input,textarea,summary):focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.pine-main .balance-panel { margin:1.25rem 0; }
.pine-main .notice { margin:1rem 0; padding:1rem; border:1px solid #c6a44d; border-radius:.65rem; background:#fff4d2; color:#57410e; overflow-wrap:anywhere; }
.pine-main .notice.saved { background:#e2f3e9; color:#184c31; border-color:#5f9c7c; }
.pine-main .account-table { margin-top:1rem; border:1px solid var(--line); border-radius:.65rem; overflow:hidden; }
.pine-main .account-table summary { padding:1rem; font-weight:800; cursor:pointer; }
.pine-main .table-wrap { max-width:100%; max-height:36rem; overflow:auto; }
.pine-main table { width:100%; min-width:40rem; border-collapse:collapse; font-size:.85rem; }
.pine-main th,.pine-main td { padding:.75rem; border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.pine-main th { position:sticky; top:0; background:var(--forest); color:var(--paper); }
.pine-main td small { display:block; color:var(--muted); overflow-wrap:anywhere; }
.pine-main .record-id,.pine-main .footer { color:var(--muted); font-size:.78rem; overflow-wrap:anywhere; }
.pine-main .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.pine-main .card { display:flex; flex-direction:column; min-width:0; padding:1.25rem; }
.pine-main .card .button { align-self:flex-start; margin-top:auto; }
.pine-main .chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 1rem; }
.pine-main .chip { padding:.25rem .5rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); font-size:.75rem; }
.pine-main .muted,.pine-main .unknown { color:var(--muted); }
.pine-main .facts,.pine-main .onboarding-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.pine-main .fact { min-width:0; padding:1rem; background:var(--paper); border-radius:.6rem; }
.pine-main dt { color:var(--muted); font-size:.75rem; font-weight:800; }
.pine-main dd { margin:.4rem 0 0; overflow-wrap:anywhere; }
.pine-main .onboarding { margin-top:1rem; }
.pine-main .onboarding label { display:grid; gap:.35rem; font-size:.85rem; font-weight:700; }
.pine-main .onboarding .button { margin-top:1rem; }
.pine-main .scan-list { padding-left:1.3rem; }
.pine-main .scan-list li { margin:.65rem 0; }
.pine-main .back { display:inline-block; padding:.6rem 0; }
.pine-main .footer { margin-top:2rem; }
@media(max-width:900px) { .pine-main .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pine-main .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .pine-main { width:calc(100% - 1rem); } .pine-header { padding:1rem; } .pine-header nav { gap:.35rem; } .pine-main .grid,.pine-main .facts,.pine-main .onboarding-grid { grid-template-columns:1fr; } .pine-main .search { grid-template-columns:minmax(0,1fr) auto; } .pine-main .search input { grid-column:1/-1; } .pine-main .search .button { width:100%; } .pine-main .stat { padding:.8rem; } }

/* Secure is one native page layer. The adapter adds no header of its own. */
body.wflo-secure-native-shell-mounted > header.wflo-secure-native-shell {
  border-bottom-color: var(--wflo-secure-gold);
  box-shadow:
    inset .32rem 0 0 var(--wflo-secure-red),
    0 .45rem 1.4rem rgba(3, 18, 14, .24);
}

body.wflo-secure-native-shell-mounted > header.wflo-secure-native-shell #secure-sign-out,
body.wflo-secure-native-shell-mounted > .wflo-secure-native-shell #secure-sign-out {
  width: auto;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: .7rem 1rem;
  color: #fff;
  background: var(--wflo-secure-red);
  border: 1px solid rgba(255, 250, 240, .3);
  border-radius: .55rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

body.wflo-secure-native-shell-mounted #secure-sign-out:focus-visible,
#angies-sign-out:focus-visible {
  outline: 3px solid var(--wflo-secure-gold);
  outline-offset: 3px;
}

body.wflo-secure-native-shell-mounted .customer-portal-label {
  align-self: center;
  max-width: 16rem;
  overflow: hidden;
  color: var(--wflo-secure-mint);
  font-size: .72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.wflo-secure-native-shell-mounted .wflo-secure-integrated-control:focus-visible {
  outline: 3px solid var(--wflo-secure-mint);
  outline-offset: 3px;
}

/* After controls are adopted, a stale empty wrapper cannot reappear as another
   bar. The native header above remains the only visible control layer. */
body.wflo-secure-shell-mounted > .customer-audit-actions:not(.wflo-secure-native-shell),
body.wflo-secure-shell-mounted > .secure-station-menu:not(.wflo-secure-native-shell) {
  display: none !important;
}

@media (max-width: 760px) {
  body.wflo-secure-native-shell-mounted > header.wflo-secure-native-shell nav {
    max-width: 100%;
  }
  body.wflo-secure-native-shell-mounted .wflo-secure-integrated-control {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wflo-secure-shell-mounted *,
  body.wflo-secure-shell-mounted *::before,
  body.wflo-secure-shell-mounted *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

body.angies-shelf-page {
  margin: 0;
  color: #20352d;
  background: #f8f3e9;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.angies-skip { position: absolute; left: -999px; top: 0; z-index: 10; padding: .75rem; background: #fff; color: #173d32; }
.angies-skip:focus { left: .75rem; }
.angies-stage-bar { display: flex; justify-content: center; gap: .8rem; padding: .55rem 1rem; color: #fff; background: #325244; font-size: .78rem; letter-spacing: .03em; }
.angies-shelf-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2.2rem clamp(1rem,5vw,4.5rem); background: #fffaf1; border-bottom: 1px solid #d8cebc; }
.angies-shelf-header h1 { margin: .1rem 0; font-family: Georgia, serif; font-size: clamp(2.25rem,6vw,4.7rem); font-weight: 500; line-height: .95; }
.angies-shelf-header p { max-width: 48rem; }
.angies-shelf-header nav { display: flex; gap: .7rem; align-items: center; }
.angies-shelf-header a,.angies-shelf-header button,.angies-actions button,#angies-publish,.angies-draft-rail>button,.angies-draft-rail article button { min-height: 44px; padding: .7rem 1rem; border: 1px solid #294d40; border-radius: 999px; color: #fff; background: #294d40; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.angies-shelf-header a { color: #294d40; background: transparent; }
#angies-sign-out { min-height: 48px; padding-inline: 1.15rem; border-color: #8f3428; background: #a63b2d; box-shadow: 0 .35rem 1rem rgba(92,27,20,.18); }
#angies-sign-out[aria-busy="true"],#secure-sign-out[aria-busy="true"] { cursor: wait; opacity: .78; }
.angies-eyebrow { margin: 0; color: #8a473b; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.angies-shelf-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(18rem,1fr); gap: 1.3rem; padding: 1.3rem clamp(1rem,4vw,3rem) 3rem; }
.angies-workspace,.angies-draft-rail { padding: clamp(1rem,3vw,2rem); background: #fff; border: 1px solid #ddd3c1; border-radius: 1.2rem; box-shadow: 0 .7rem 2.5rem rgba(33,52,44,.08); }
.angies-flow-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.angies-flow-heading h2,.angies-draft-rail h2 { margin: .2rem 0 1rem; font-family: Georgia,serif; font-size: clamp(1.5rem,3vw,2.3rem); font-weight: 500; }
.angies-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; padding: 0; list-style: none; }
.angies-steps li { display: grid; gap: .3rem; padding: .7rem; border-top: 3px solid #d9cdbb; font-size: .82rem; }
.angies-steps li.active { border-color: #ad5d4d; }
.angies-steps span { font-weight: 850; }
.angies-concepts { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin: 1.2rem 0; }
.angies-concepts label { position: relative; display: grid; gap: .35rem; padding: .55rem; border: 2px solid transparent; border-radius: .8rem; background: #f7f2e7; cursor: pointer; }
.angies-concepts label:has(input:checked) { border-color: #ad5d4d; }
.angies-concepts input { position: absolute; margin: .8rem; width: 1.1rem; height: 1.1rem; }
.angies-concepts img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: .55rem; }
.angies-concepts strong,.angies-concepts small { padding: 0 .25rem; }
.angies-concepts small { color: #705f53; }
.angies-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
.angies-field-grid label { display: grid; gap: .35rem; color: #294d40; font-weight: 800; }
.angies-field-grid .wide { grid-column: 1/-1; }
.angies-field-grid input,.angies-field-grid select,.angies-field-grid textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: .72rem .8rem; border: 1px solid #bcb09f; border-radius: .55rem; color: #20352d; background: #fffdfa; font: inherit; }
.angies-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; }
.angies-actions button:first-child { color: #294d40; background: transparent; }
.angies-preview { display: grid; grid-template-columns: minmax(9rem,.65fr) 1fr; gap: 1rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #dbcab8; border-radius: .9rem; background: #fffaf1; }
.angies-preview img { width: 100%; border-radius: .7rem; }
.angies-preview h3 { font-family: Georgia,serif; font-size: 1.8rem; margin: .35rem 0; }
.angies-publish { margin-top: 1.2rem; padding: 1.15rem; border: 2px solid #8a473b; border-radius: .9rem; background: #fff7ed; }
.angies-publish h2 { margin: .25rem 0; font-family: Georgia,serif; font-size: 1.7rem; font-weight: 500; }
.angies-publish fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem .9rem; margin: 1rem 0; padding: .9rem; border: 1px solid #d4c3ad; border-radius: .7rem; }
.angies-publish legend { padding: 0 .35rem; color: #294d40; font-weight: 850; }
.angies-publish label { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.35; }
.angies-publish input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .12rem; flex: 0 0 auto; }
#angies-publish { background: #8a473b; border-color: #8a473b; }
#angies-publish:disabled { cursor: not-allowed; opacity: .65; }
.angies-message { min-height: 1.5rem; color: #8a473b; font-weight: 750; }
.angies-draft-rail { align-self: start; position: sticky; top: 1rem; }
.angies-draft-rail>button { width: 100%; margin-bottom: 1rem; color: #294d40; background: transparent; }
.angies-draft-rail article { display: grid; gap: .25rem; padding: .75rem 0; border-top: 1px solid #ded3c1; }
.angies-draft-rail article button { width: 100%; text-align: left; color: #294d40; background: #f7f2e7; border-color: transparent; }
.angies-draft-rail article small { padding: 0 .7rem; color: #705f53; }
.angies-boundary { margin-top: 1rem; padding: 1rem; border-left: 4px solid #ad5d4d; background: #f7f2e7; }
.angies-boundary p { margin-bottom: 0; }
@media (max-width: 850px) {
  .angies-shelf-header,.angies-flow-heading { align-items: stretch; flex-direction: column; }
  .angies-shelf-layout { grid-template-columns: 1fr; }
  .angies-draft-rail { position: static; }
  .angies-concepts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px) {
  .angies-stage-bar { align-items: center; flex-direction: column; gap: .15rem; }
  .angies-shelf-header nav,.angies-actions { flex-wrap: wrap; }
  .angies-shelf-header nav>* { flex: 1; text-align: center; }
  .angies-steps { grid-template-columns: repeat(2,1fr); }
  .angies-field-grid,.angies-preview,.angies-publish fieldset { grid-template-columns: 1fr; }
}