/* arc-office.css — the Office component styles (.of-*, .cp-*), shared by office.html, member-dashboard.html (Profile)
   and settings.html since the Members Club relocation (2 Oct 2026). Moved verbatim from office.html's inline <style>. */
.of-state { margin: 14px 0 0; font-size: .92rem; opacity: .9; }
.of-doors { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.of-doors li { margin: 0; }
.of-doors button, .of-doors a { width: 100%; justify-content: flex-start; text-align: left; }
.of-grid { display: grid; gap: clamp(16px, 2.4vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: clamp(24px, 3.4vw, 40px); }
.of-card { background: var(--arcs-w, #fff); border: 1px solid rgba(11,31,59,.10); border-radius: 16px; padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px; }
.arcs-band--white .of-card { background: var(--arcs-paper, #f7f5f0); }
.of-card h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.of-card p { margin: 0; font-size: .92rem; line-height: 1.55; }
.of-card .of-next { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.of-card .of-acts { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.of-lvl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.of-pill { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 12px; border-radius: 20px; background: #d4af37; color: #2a2100; }
.of-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.of-step { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; background: var(--arcs-w, #fff); border: 1px solid rgba(11,31,59,.10); border-radius: 12px; padding: 14px 16px; }
.of-step strong { display: block; font-weight: 600; }
.of-step span.of-how { display: block; font-size: .86rem; opacity: .8; margin-top: 3px; }
.of-msg { font-size: .88rem; margin-top: 8px; min-height: 1.2em; }
/* arc-shell.css makes .arcs-btn width:100% at 620px and below; inside a step row that
   squeezed the step title to ~99px at 390px (visual check, 26 Sep). */
.of-step > .arcs-btn { width: auto; flex: 0 0 auto; }
#ofSignedOut { margin-top: 18px; }
.of-muted { opacity: .78; }
.of-form { display: grid; gap: 10px; }
.of-form label { display: grid; gap: 4px; font-size: .84rem; font-weight: 600; }
.of-form input, .of-form textarea, .of-form select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid rgba(11,31,59,.22); border-radius: 10px; background: #fff; color: inherit; width: 100%; box-sizing: border-box; }
.of-form textarea { min-height: 84px; resize: vertical; }
.of-row2 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cp-list { display: grid; gap: 12px; margin-top: clamp(20px, 3vw, 32px); }
.cp-item { background: var(--arcs-w, #fff); border: 1px solid rgba(11,31,59,.12); border-radius: 14px; }
.arcs-band--white .cp-item { background: var(--arcs-paper, #f7f5f0); }
.cp-item > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cp-item > summary::-webkit-details-marker { display: none; }
.cp-item > summary:focus-visible { outline: 2px solid var(--s3-gold, #d4af37); outline-offset: 2px; border-radius: 14px; }
.cp-name { font-weight: 600; }
.cp-sub { font-size: .82rem; opacity: .75; }
.cp-badge { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 20px; background: rgba(11,31,59,.08); white-space: nowrap; }
.cp-badge--complete { background: #d9f2e6; color: #0f5b3a; }
.cp-badge--archived { background: rgba(11,31,59,.05); }
.cp-body { padding: 0 18px 18px; display: grid; gap: 14px; }
.cp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.cp-log li { padding: 8px 10px; border-left: 3px solid rgba(11,31,59,.18); background: rgba(11,31,59,.03); border-radius: 0 8px 8px 0; }
.cp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-acts .arcs-btn, .of-form .arcs-btn { width: auto; }
[hidden] { display: none !important; }
/* A1C (27 Sep 2026) — the ADMIN sections re-homed here (arc-office-admin.js). */
.of-ids { margin: 0; display: grid; gap: 8px; }
.of-ids > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(11,31,59,.08); padding-bottom: 6px; }
.of-ids dt { font-size: .84rem; opacity: .75; }
.of-ids dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; word-break: break-word; }
.of-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.of-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid rgba(11,31,59,.10); border-radius: 10px; padding: 10px 12px; }
.of-item .arcs-btn { width: auto; }
.of-sub { display: block; font-size: .82rem; opacity: .75; margin-top: 2px; }
.of-tag { font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: #d9f2e6; color: #0f5b3a; white-space: nowrap; }
.of-err { color: #b3261e; }
.of-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.of-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(11,31,59,.18); border-radius: 999px; padding: 7px 13px; font-size: .86rem; cursor: pointer; }
/* (0,3,1): beats .arcs-page button:not(.arcs-btn) (0,2,1), which reset the colour to
   inherit and left the selected chip's label navy-on-navy (measured in the A1C preview). */
.of-card button.of-pref { font: inherit; font-size: .84rem; color: #0b1f3b; border: 1px solid rgba(11,31,59,.2); border-radius: 999px; padding: 7px 13px; background: #fff; cursor: pointer; }
.of-card button.of-pref.on { background: #0b1f3b; color: #fff; border-color: #0b1f3b; }
.of-code { font-family: ui-monospace, Consolas, monospace; font-size: .84rem; word-break: break-all; background: rgba(11,31,59,.05); padding: 8px 10px; border-radius: 8px; }
.of-big { display: flex; align-items: center; gap: 12px; }
.of-big > b { font-size: 2rem; line-height: 1; }
.of-bar { height: 8px; border-radius: 20px; background: #eef2f7; overflow: hidden; }
.of-bar > span { display: block; height: 100%; background: #2bbfb3; }
.of-board, .of-tiers { margin: 0; padding-left: 18px; font-size: .88rem; display: grid; gap: 4px; }
.of-board li.me { font-weight: 600; }
.of-doc { max-height: 220px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: .84rem; border: 1px solid rgba(11,31,59,.14); border-radius: 8px; padding: 10px; }
.of-tick { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 9px; font-weight: 400 !important; }
.of-tick input { width: auto !important; margin-top: 3px; }
.of-dock { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); }