/* Member profile and account editor.
   ================================================================================

   Johnny, 15 Sep 2026: "look at the backend code of my site NOC and mimic the profile
   and the profile editor for the breakthrough boss app ... DO NOT try to recreate the
   wheel here and use the code I already have".

   So the LAYOUT is lifted from Notebook of a COO, measured off the live pages at
   app.notebookofacoo.com rather than guessed: the 120px circular avatar, the
   120px/1fr banner grid with a 24px gap, 28px of padding, the radial accent in the
   top right corner, the chip row, the standing bar, the two trade cards, and the
   account page's left pill nav beside stacked sections.

   The COLOUR is Breakthrough Boss. NOC is near-black and gold; this portal is cream,
   teal and clay, and a profile page that suddenly went dark would read as a different
   product bolted on. Johnny chose "NOC layout, BB colours" when asked.

   EVERY CLASS IS PREFIXED nocp-. CLAUDE.md section 11: a progress bar once reused
   .agbar, a class docs.js owns, and silently restyled every action guide in the portal.
   Nothing in here can touch anything outside it. */

/* ---------------------------------------------------------------- the banner */
.nocp-back{display:inline-flex;align-items:center;gap:7px;color:var(--muted,#54504A);
  font-size:.84rem;font-weight:600;margin-bottom:20px;text-decoration:none}
.nocp-back:hover{color:var(--clay-d,#A85F44)}

.nocp-banner{background:var(--card,#fff);border:1px solid rgba(44,44,44,.12);
  border-radius:20px;padding:28px;margin-bottom:16px;position:relative;overflow:hidden}
/* NOC puts a soft radial glow in the top right. Theirs is gold on black; this is the
   portal's clay at low alpha on cream, which reads the same way without shouting. */
.nocp-banner::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at top right,rgba(196,120,90,.13),transparent 60%);
  pointer-events:none}
.nocp-banner__inner{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:24px;align-items:flex-start}
.nocp-avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#2E7E73,#13433D);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:2.4rem;
  border:3px solid var(--card,#fff);box-shadow:0 6px 20px rgba(19,67,61,.18)}
.nocp-avatar img{width:100%;height:100%;object-fit:cover}
.nocp-name{margin:0;font-size:1.7rem;line-height:1.2;color:var(--teal-d,#13433D)}
.nocp-handle{margin:2px 0 0;font-size:.9rem;color:var(--muted,#8A8175)}
.nocp-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.nocp-chip{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.72rem;
  font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  background:rgba(19,67,61,.07);color:var(--teal-d,#13433D);border:1px solid rgba(19,67,61,.12)}
/* The archetype chip is the one that is about who they are rather than what they sell,
   so it gets the accent, exactly as NOC does with .pchip--arch. */
.nocp-chip--arch{background:rgba(196,120,90,.14);color:var(--clay-d,#A85F44);
  border-color:rgba(196,120,90,.28)}
.nocp-bio{margin:14px 0 0;font-size:.95rem;line-height:1.65;color:var(--ink,#2C2C2C);max-width:62ch}
.nocp-meta{margin:12px 0 0;font-size:.82rem;color:var(--muted,#8A8175)}
.nocp-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}

/* ---------------------------------------------------------------- standing bar */
.nocp-standing{background:var(--card,#fff);border:1px solid rgba(44,44,44,.12);
  border-radius:20px;padding:18px 20px;margin-bottom:16px}
.nocp-standing__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.nocp-standing__now{font-weight:800;color:var(--teal-d,#13433D)}
.nocp-standing__next{font-size:.8rem;color:var(--muted,#8A8175)}
.nocp-standing__track{height:7px;border-radius:999px;background:rgba(19,67,61,.1);margin:10px 0 8px;overflow:hidden}
.nocp-standing__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2E7E73,#C4785A);transition:width .4s ease}
.nocp-standing__why{margin:0;font-size:.78rem;color:var(--muted,#8A8175)}

/* ---------------------------------------------------------------- trade cards */
.nocp-trade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.nocp-trade__card{background:var(--card,#fff);border:1px solid rgba(44,44,44,.12);
  border-radius:16px;padding:16px 18px}
.nocp-trade__card--offer{border-left:4px solid #2E7E73}
.nocp-trade__card--need{border-left:4px solid #C4785A}
.nocp-trade__lbl{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted,#8A8175);margin-bottom:6px}
.nocp-trade__val{font-size:.95rem;line-height:1.5;color:var(--ink,#2C2C2C)}
.nocp-trade__empty{font-size:.9rem;color:var(--muted,#8A8175);font-style:italic}

/* ---------------------------------------------------------------- account editor */
.nocp-acct{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.nocp-acct__nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px}
.nocp-acct__nav button{appearance:none;background:none;border:0;text-align:left;
  padding:9px 12px;border-radius:10px;cursor:pointer;font:inherit;font-size:.8rem;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted,#8A8175)}
.nocp-acct__nav button:hover{background:rgba(19,67,61,.05);color:var(--teal-d,#13433D)}
.nocp-acct__nav button.on{background:rgba(19,67,61,.09);color:var(--teal-d,#13433D)}
.nocp-sec{background:var(--card,#fff);border:1px solid rgba(44,44,44,.12);
  border-radius:20px;padding:24px;margin-bottom:16px}
.nocp-sec__title{margin:0;font-size:1.15rem;color:var(--teal-d,#13433D)}
.nocp-sec__sub{margin:4px 0 18px;font-size:.86rem;color:var(--muted,#8A8175)}
.nocp-field{display:block;margin-bottom:14px}
.nocp-field__lbl{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted,#8A8175);margin-bottom:5px}
.nocp-field__hint{display:block;font-size:.76rem;color:var(--muted,#8A8175);margin-top:4px}
.nocp-in{width:100%;padding:10px 12px;border:1px solid rgba(44,44,44,.18);border-radius:10px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--ink,#2C2C2C)}
.nocp-in:focus{outline:2px solid rgba(46,126,115,.35);outline-offset:1px;border-color:#2E7E73}
textarea.nocp-in{min-height:92px;resize:vertical;line-height:1.55}
.nocp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nocp-toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-top:1px solid rgba(44,44,44,.08)}
.nocp-toggle:first-child{border-top:0}
.nocp-toggle__b b{display:block;font-size:.92rem}
.nocp-toggle__b span{display:block;font-size:.78rem;color:var(--muted,#8A8175);margin-top:2px}
.nocp-avedit{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.nocp-avedit__pic{width:68px;height:68px;border-radius:50%;overflow:hidden;flex:0 0 68px;
  background:linear-gradient(135deg,#2E7E73,#13433D);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.4rem}
.nocp-avedit__pic img{width:100%;height:100%;object-fit:cover}
.nocp-avedit__name{font-weight:800}
.nocp-avedit__email{font-size:.82rem;color:var(--muted,#8A8175)}
.nocp-savebar{display:flex;align-items:center;gap:10px;margin-top:6px}
.nocp-saved{font-size:.82rem;color:#2E7E73;font-weight:700;opacity:0;transition:opacity .2s}
.nocp-saved.on{opacity:1}

/* ---------------------------------------------------------------- social link rows
   Notebook of a COO's shape: a brand mark, the platform name, and a box with a real
   example in it. A blank row means "I do not use this", which is far clearer than one
   text field that expects a member to remember a separator. */
.nocp-soc{display:flex;flex-direction:column;gap:10px}
.nocp-soc__row{display:grid;grid-template-columns:36px 108px minmax(0,1fr);gap:12px;align-items:center}
.nocp-soc__icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:.95rem;flex:0 0 36px}
.nocp-soc__name{font-size:.86rem;font-weight:700;color:var(--ink,#2C2C2C);cursor:pointer}

/* ---------------------------------------------------------------- narrow screens
   NOC's banner is a two column grid. Below 640 the avatar and the name stack, because
   a 120px circle next to a 140px column of wrapped text is unreadable on a phone. */
@media (max-width:640px){
  .nocp-banner{padding:20px}
  .nocp-banner__inner{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
  .nocp-chips,.nocp-actions{justify-content:center}
  .nocp-bio{text-align:left}
  .nocp-trade{grid-template-columns:1fr}
  .nocp-acct{grid-template-columns:1fr}
  .nocp-acct__nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .nocp-row{grid-template-columns:1fr}
  /* The name sits under the icon rather than beside it: a 108px label column plus a URL
     box on a 360px screen leaves the box too narrow to read what you typed. */
  .nocp-soc__row{grid-template-columns:36px minmax(0,1fr);gap:8px 10px}
  .nocp-soc__name{grid-column:2}
  .nocp-soc__row .nocp-in{grid-column:1 / -1}
}