/* =========================================================
   2S DEVELOPMENT — Owner Portal editorial design system
   ("own-*" components)

   Production implementation of the approved local design
   concept (design-concepts/owner-portal/, design-concepts/
   owner-vendor/). Reuses css/main.css tokens (--ivory/--ink/
   --sage/--brass/--line, --serif/--sans/--mono, --ease-3/
   --ease-4, --gutter) and existing components (.eyebrow,
   .field, .pill-opt, .project-row family) directly in markup
   wherever they already fit. This file adds only the new
   editorial row/masthead/tab/form/photo components that have
   no existing production equivalent, replacing the rounded-
   card/pill-badge patterns (.agent-card, .ag-vendor-card,
   .owner-card-grid, .owner-form-card, .ag-status-pill) they
   supersede on screens converted to this system. Screens not
   yet converted keep using the older classes untouched.

   Also loaded on network/agent/index.html and portal.html (Client
   Portal) as the shared 2S Portal shell layer — the filename and
   "own-*" prefix are historical (this started as Owner-only), but
   the shell/nav/field-visibility rules below are intentionally
   role-agnostic and reused verbatim so Owner, Agent, and Client
   Portal render the identical top-shell visual language. Nothing
   Owner-specific (Vendor rows, tabs, forms, etc.) is referenced by
   Agent or Client markup, so loading the whole file is safe.
   ========================================================= */

/* =========================================================
   OWNER VENDOR — DESIGN CONCEPT (local prototype only)
   Namespace: own-*
   Not wired into production. Not loaded anywhere except
   design-concepts/owner-vendor/index.html.

   Reuses design tokens + components from css/main.css
   (--ivory/--ink/--sage/--brass/--line, --serif/--sans/--mono,
   --ease-3/--ease-4, --gutter, .eyebrow, .h-section, .h-mid,
   .rule, .field, .field-group, .pill-opt, .project-row family,
   .service-row) directly in the markup wherever that existing
   class already does the job. This file adds ONLY the pieces
   that have no existing equivalent: the prototype's own review
   sidebar/chrome, and Vendor-specific row/section components
   modeled on .project-row/.service-row but shaped for Vendor
   data (status word, tab nav, fact rows, photo system, document
   rows, history rows, classification groups).
   ========================================================= */

/* ---------------- shared page frame (replaces the ad-hoc
   full-width stage with a readable max-width + gutter, matching
   the concept's .vc-frame) ---------------- */
.own-frame{ max-width:1180px; margin:0 auto; padding:48px var(--gutter) 120px; }
/* Client Portal's own existing fade-in transition (js/portal-app.js's
   render(), GSAP-driven), given its own small class instead of reusing
   .pe-stage — .pe-stage bakes in the Project Configurator's fixed-
   topbar top offset and vertical centering, which don't apply now
   that Client Portal's header is this shared sticky .own-shell rather
   than a floating .pe-topbar. Same opacity 0->1 "is-current" toggle
   the existing JS already performs; only the CSS backing it changed. */
.own-fade-stage{ opacity:0; }
.own-fade-stage.is-current{ opacity:1; }

/* ---------------- shared vendor masthead / top bar ---------------- */
.own-topline{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.own-topline h1{ font:400 clamp(30px,3.4vw,46px)/1.02 var(--serif); letter-spacing:-.02em; }
.own-top-actions{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.own-link{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:0;
}
.own-link .arrow{ display:inline-block; transition:transform .35s var(--ease-4); }
.own-link:hover .arrow{ transform:translateX(3px); }
.own-link.is-subtle{ color:var(--sage); }
.own-link.is-danger{ color:#9c5b3e; }
.own-btn-primary{
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; padding:14px 24px;
  background:var(--ink); color:var(--ivory); border:1px solid var(--ink); display:inline-flex; align-items:center; gap:10px;
  transition:background .35s var(--ease-3), color .35s var(--ease-3);
}
.own-btn-primary:hover{ background:var(--brass); border-color:var(--brass); }
.own-btn-primary .arrow{ transition:transform .35s var(--ease-4); }
.own-btn-primary:hover .arrow{ transform:translateX(3px); }

/* ---------------- filters (square, hairline — no boxed selects) ---------------- */
.own-filter-strip{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:34px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.own-search-field{ flex:1; min-width:220px; }
.own-search-field input{
  width:100%; border:none; border-bottom:1px solid transparent; background:none; outline:none;
  font:14px var(--sans); color:var(--ink); padding:4px 0;
}
.own-search-field input:focus{ border-bottom-color:var(--ink); }
.own-search-field input::placeholder{ color:var(--sage); }
.own-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.own-result-count{ margin:18px 0 6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }

/* ---------------- VENDOR LIST — editorial rows ---------------- */
.own-vendor-list{ margin-top:6px; }
.own-vendor-row{
  display:grid; grid-template-columns:220px 1fr auto; gap:32px; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line); position:relative;
}
.own-vendor-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-vendor-figure img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.1s var(--ease-4); }
.own-vendor-row:hover .own-vendor-figure img{ transform:scale(1); }
.own-vendor-figure-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 30px var(--serif); color:var(--sage); }
.own-vendor-index{ position:absolute; left:8px; top:8px; font:10px var(--mono); color:var(--ivory); background:rgba(27,28,25,.55); padding:3px 7px; letter-spacing:.06em; }
.own-vendor-info{ min-width:0; }
.own-vendor-name{ font:400 clamp(22px,2.4vw,32px)/1.05 var(--serif); letter-spacing:-.02em; transition:transform .5s var(--ease-4), color .5s var(--ease-3); }
.own-vendor-row:hover .own-vendor-name{ transform:translateX(8px); color:var(--sage); }
.own-vendor-meta{
  margin-top:10px; display:flex; gap:14px; flex-wrap:wrap;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage);
}
.own-vendor-meta .is-status-approved{ color:#4F5A4A; }
.own-vendor-meta .is-status-pending{ color:var(--brass); }
.own-vendor-meta .is-status-draft{ color:var(--sage); }
.own-vendor-meta .is-status-inactive{ color:#b8b3a6; }
.own-vendor-meta .is-status-rejected{ color:#9c5b3e; }
.own-vendor-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease-3), transform .35s var(--ease-3);
}
.own-vendor-row:hover .own-vendor-actions{ opacity:1; transform:translateY(0); }
.own-empty-state{
  padding:80px var(--gutter); text-align:center; border-top:1px solid var(--line); margin-top:6px;
}
.own-empty-state b{ display:block; font:400 26px var(--serif); margin-bottom:10px; }
.own-empty-state p{ font:13px/1.6 var(--sans); color:var(--sage); max-width:420px; margin:0 auto 22px; }

@media (max-width:900px){
  .own-vendor-row{ grid-template-columns:1fr; gap:16px; padding:24px 0; }
  .own-vendor-actions{ flex-direction:row; opacity:1; transform:none; }
}

/* ---------------- ADD VENDOR — numbered option rows ---------------- */
.own-source-list{ margin-top:30px; border-top:1px solid var(--line); }
.own-source-row{
  display:flex; align-items:center; gap:28px; padding:30px 0; border-bottom:1px solid var(--line);
  cursor:pointer; transition:padding .4s var(--ease-4);
}
.own-source-row:hover{ padding-left:12px; }
.own-source-index{ font:11px var(--mono); color:var(--brass); flex:none; width:28px; }
.own-source-body{ flex:1; min-width:0; }
.own-source-name{ font:400 clamp(22px,2.6vw,32px)/1.1 var(--serif); letter-spacing:-.02em; transition:transform .4s var(--ease-4); }
.own-source-row:hover .own-source-name{ transform:translateX(8px); }
.own-source-hint{ margin-top:6px; font:12px/1.5 var(--sans); color:var(--sage); max-width:520px; }
.own-source-arrow{ font:20px var(--serif); color:var(--sage); flex:none; transition:transform .4s var(--ease-4); }
.own-source-row:hover .own-source-arrow{ transform:translateX(6px); color:var(--ink); }

/* ---------------- VENDOR DETAIL — masthead ---------------- */
.own-vd-masthead{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:end; padding-bottom:34px; border-bottom:1px solid var(--line); }
.own-vd-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-vd-photo img{ width:100%; height:100%; object-fit:cover; }
.own-vd-eyebrow{ display:block; margin-bottom:16px; }
.own-vd-name{ font:400 clamp(34px,4.2vw,58px)/1 var(--serif); letter-spacing:-.03em; }
.own-vd-meta{ margin-top:18px; display:flex; gap:16px; flex-wrap:wrap; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.own-vd-links{ margin-top:22px; display:flex; gap:24px; flex-wrap:wrap; }
.own-vd-actions{ margin-top:28px; display:flex; gap:24px; flex-wrap:wrap; }
@media (max-width:900px){ .own-vd-masthead{ grid-template-columns:1fr; gap:24px; } }

/* ---------------- tab nav (hairline underline, already-correct
   pattern — namespaced here only so this prototype doesn't need
   to load css/agent-port.css) ---------------- */
.own-tab-nav{ display:flex; gap:4px; margin-top:0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.own-tab-nav::-webkit-scrollbar{ display:none; }
.own-tab-link{
  border:none; background:none; cursor:pointer; padding:16px 18px; font:11px var(--mono); text-transform:uppercase;
  letter-spacing:.06em; color:var(--sage); border-bottom:2px solid transparent; white-space:nowrap;
}
.own-tab-link:hover{ color:var(--ink); }
.own-tab-link.is-active{ color:var(--ink); border-bottom-color:var(--brass); }
.own-tab-body{ padding-top:52px; }

/* ---------------- numbered editorial form sections (Basic
   Information / Internal / Product form) ---------------- */
.own-form-section{ padding:44px 0; border-bottom:1px solid var(--line); }
.own-form-section:first-child{ padding-top:0; }
.own-form-section-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:28px; }
.own-form-section-num{ font:10px var(--mono); color:var(--brass); letter-spacing:.08em; }
.own-form-section-title{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.own-form-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; }
.own-form-grid.is-even{ grid-template-columns:1fr 1fr; }
/* Local design prototype (Agent Basic Information) — form column wider
   than the narrow read-only preview beside it, unlike the base
   0.9fr/1.1fr ratio (which assumes the second column is the primary
   content). Not used by anything else yet; safe additive variant. */
.own-form-grid.is-form-primary{ grid-template-columns:1.6fr 1fr; }
@media (max-width:900px){ .own-form-grid{ grid-template-columns:1fr; gap:28px; } }

/* Local design prototype: Agent Identity photo + name composition
   (previously agent-photo-row/agent-card-photo/etc. had ZERO CSS
   anywhere in this file — everything rendered as unstyled stacked
   divs, which is the main structural cause of the "chaotic" Basic
   Information layout this task is fixing). */
.agent-photo-row{ display:flex; align-items:flex-start; gap:24px; }
.agent-card-photo, .agent-card-photo-fallback{
  width:84px; height:84px; flex:none; object-fit:cover; border:1px solid var(--line);
}
.agent-card-photo-fallback{
  display:flex; align-items:center; justify-content:center;
  font:400 26px var(--serif); letter-spacing:-.01em; color:var(--sage-deep);
  background:var(--ivory-2, var(--ivory));
}
.agent-photo-actions{ display:flex; flex-direction:column; gap:6px; padding-top:2px; }
.agent-photo-hint{ font:10px var(--mono); color:var(--sage); letter-spacing:.02em; }
.agent-identity-row{ display:flex; align-items:flex-start; gap:28px; }
.agent-identity-row > .agent-photo-row{ flex:none; }
.agent-identity-row > .own-field-row{ flex:1; }
@media (max-width:640px){ .agent-identity-row{ flex-direction:column; } }

/* First name / Last name — a real 2-column grid rather than a plain
   flex row, so the two fields are GUARANTEED to sit side by side on
   desktop instead of depending on however much width happens to be
   left after the photo column (a flex-wrap fallback is exactly what
   let them collapse onto separate lines before). */
.agent-identity-fields{ display:grid; grid-template-columns:1fr 1fr; gap:24px; flex:1; min-width:0; }
@media (max-width:640px){ .agent-identity-fields{ grid-template-columns:1fr; } }

/* ---------- Agent Detail masthead (dedicated layout) ----------
   NOT a reuse of Vendor Detail's .own-vd-masthead: that's a wide
   two-column GRID built for a full-bleed rectangular Vendor photo: a
   fixed-size Agent avatar dropped into its first grid column just sat
   at the column's own start, with a large gap of unused column width
   before the name/info block began. A flex row sized to the avatar
   itself keeps the photo and profile info actually adjacent. */
.agent-masthead{ display:flex; align-items:center; gap:28px; margin-top:22px; padding-bottom:34px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
/* Subtle "you are editing" cue (rule: "make it visually obvious",
   without a modal/full-screen editor) — a quiet accent border, same
   restrained language as the rest of this editorial system. */
.agent-masthead.is-editing{ border-bottom-color:var(--brass, var(--sage-deep)); }
/* Wraps the photo circle + its Replace/Remove controls (edit mode
   only) as one vertical unit, so those controls stack BELOW the
   photo rather than becoming a 3rd flex item squeezed between the
   photo and the name/info block. */
.agent-masthead-photo-col{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:none; }
/* position:relative is required here: .own-ph's own base rule (below,
   shared with .own-entity-figure's list-row thumbnails) is
   `position:absolute; inset:0`, meant to fill its nearest positioned
   ancestor. Without this, an Agent/Client with no photo yet (the
   .own-ph letter-avatar fallback) had that placeholder escape this
   120x120 circle entirely and expand to fill whatever distant
   positioned ancestor it found instead — the exact cause of the
   Client Detail "giant photo" layout regression. */
.agent-masthead-photo{ position:relative; flex:none; width:120px; height:120px; border-radius:50%; overflow:hidden; background:var(--clay); }
.agent-masthead-photo img{ width:100%; height:100%; object-fit:cover; }
.agent-masthead-photo .own-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px; }
.agent-masthead-photo-col .agent-photo-actions{ align-items:center; text-align:center; }
.agent-masthead-info{ flex:1; min-width:240px; }
.agent-masthead-roles{ margin-top:10px; font:15px/1.5 var(--sans); color:var(--ink); max-width:56ch; }
.agent-masthead-company{ margin-top:4px; font:15px/1.5 var(--sans); color:var(--sage-deep); }
.agent-masthead-meta{ margin-top:16px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.agent-masthead-location::before{ content:"●"; font-size:8px; margin-right:7px; vertical-align:middle; }
.agent-masthead-links{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:640px){
  .agent-masthead{ gap:20px; }
  .agent-masthead-photo{ width:88px; height:88px; }
}

/* Local design prototype: Professional Links as a coherent 2x2 grid
   (Website/Facebook on one row, LinkedIn/Instagram on the next)
   instead of 4 fields forced into one own-field-row. */
.own-links-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 24px; }
@media (max-width:560px){ .own-links-grid{ grid-template-columns:1fr; } }
.own-field-row{ display:flex; gap:24px; flex-wrap:wrap; }
.own-field-row > .field{ flex:1; min-width:180px; }
.own-name-field input{
  border:1px solid var(--line); border-radius:3px; outline:none; background:var(--ivory); width:100%;
  font:400 28px var(--serif); letter-spacing:-.01em; color:var(--ink);
  padding:10px 14px; transition:border-color .2s var(--ease-3);
}
.own-name-field input:focus{ border-color:var(--ink); }
.own-hint{ margin-top:10px; font:11px/1.6 var(--sans); color:var(--sage); }
.own-textarea{
  width:100%; min-height:130px; border:1px solid var(--line); border-radius:3px; background:var(--ivory); outline:none;
  font:15px/1.6 var(--sans); color:var(--ink); resize:vertical; padding:12px 14px; transition:border-color .2s var(--ease-3);
}
.own-textarea:focus{ border-color:var(--ink); }
.own-toggle-row{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.own-form-actions{ margin-top:48px; display:flex; align-items:center; gap:22px; }

/* ---------------- editable-field boundary correction ----------------
   Fixes a real usability issue found after the .field light-mode
   COLOR fix above (a previous pass): a bottom-hairline-only border
   reads as a quiet editorial divider, not as an editable control's
   boundary — an Owner/Agent typing into "First Name" or "Professional
   Title" had no visual cue they were in an input rather than reading
   a static label/value row. Read-only rows (.own-rel-item, metadata,
   list rows) are unaffected — these rules only ever target a real
   <input>/<textarea>/<select>. Border/radius/background match the
   pre-existing boxed .cp-field input treatment (css/portal.css) —
   reusing the already-established "this is a real field" look, not a
   third new style. Scoped to each role's stable app root so the
   homepage's own dark Contact form (.field's original definition in
   css/main.css) keeps its intentional look untouched. */
.own-app-main .field, #agent-dashboard-root .field, #portal-root .field{
  border-bottom:none; align-items:center; padding:0; margin-bottom:20px;
}
.own-app-main .field input, .own-app-main .field textarea, .own-app-main .field select,
#agent-dashboard-root .field input, #agent-dashboard-root .field textarea, #agent-dashboard-root .field select,
#portal-root .field input, #portal-root .field textarea, #portal-root .field select{
  border:1px solid var(--line); border-radius:3px; background:var(--ivory); padding:12px 14px;
  outline:none; transition:border-color .2s var(--ease-3);
}
.own-app-main .field input:focus, .own-app-main .field textarea:focus, .own-app-main .field select:focus,
#agent-dashboard-root .field input:focus, #agent-dashboard-root .field textarea:focus, #agent-dashboard-root .field select:focus,
#portal-root .field input:focus, #portal-root .field textarea:focus, #portal-root .field select:focus{
  border-color:var(--ink);
}
.own-app-main .field input, .own-app-main .field textarea, .own-app-main .field select,
#agent-dashboard-root .field input, #agent-dashboard-root .field textarea, #agent-dashboard-root .field select,
#portal-root .field input, #portal-root .field textarea, #portal-root .field select{
  color:var(--ink); caret-color:var(--ink); -webkit-text-fill-color:var(--ink);
}
.own-app-main .field input::placeholder, .own-app-main .field textarea::placeholder,
#agent-dashboard-root .field input::placeholder, #agent-dashboard-root .field textarea::placeholder,
#portal-root .field input::placeholder, #portal-root .field textarea::placeholder{ color:var(--sage); -webkit-text-fill-color:var(--sage); opacity:1; }
.own-app-main .field select:invalid, .own-app-main .field select option[value=""],
#agent-dashboard-root .field select:invalid, #agent-dashboard-root .field select option[value=""],
#portal-root .field select:invalid, #portal-root .field select option[value=""]{ color:var(--sage); }
.own-app-main .field select option, #agent-dashboard-root .field select option, #portal-root .field select option{ color:var(--ink); }
.own-app-main .field input:disabled, .own-app-main .field textarea:disabled, .own-app-main .field select:disabled,
#agent-dashboard-root .field input:disabled, #agent-dashboard-root .field textarea:disabled, #agent-dashboard-root .field select:disabled,
#portal-root .field input:disabled, #portal-root .field textarea:disabled, #portal-root .field select:disabled{
  color:var(--sage); -webkit-text-fill-color:var(--sage); opacity:1; background:var(--stone); border-color:var(--line);
}

/* ---------------- Additional Information blocks ---------------- */
.own-ai-block{ display:flex; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.own-ai-block:last-child{ border-bottom:none; }
.own-ai-photo{ width:120px; height:90px; flex:none; background:var(--clay); overflow:hidden; }
.own-ai-photo img{ width:100%; height:100%; object-fit:cover; }
.own-ai-body{ flex:1; min-width:0; }
.own-ai-title{ font:400 18px var(--serif); margin-bottom:6px; }
.own-ai-text{ font:13px/1.6 var(--sans); color:#4a4b45; max-width:60ch; }
.own-ai-actions{ margin-top:10px; display:flex; gap:18px; }

/* ---------------- photography system ---------------- */
.own-photo-main{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.own-photo-main-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-photo-main-figure img{ width:100%; height:100%; object-fit:cover; }
.own-photo-main-label{ margin-top:12px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--brass); }
.own-photo-support-label{ margin-bottom:14px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.own-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.own-photo-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--clay); }
.own-photo-tile img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform .8s var(--ease-4); }
.own-photo-tile:hover img{ transform:scale(1); }
.own-photo-tile-actions{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:8px;
  background:linear-gradient(180deg, rgba(27,28,25,0) 50%, rgba(27,28,25,.72) 100%);
  opacity:0; transition:opacity .3s var(--ease-3);
}
.own-photo-tile:hover .own-photo-tile-actions{ opacity:1; }
.own-photo-tile-actions button{ font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ivory); background:none; border:none; cursor:pointer; }
.own-photo-upload-tile{
  aspect-ratio:1/1; border:1px dashed var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--sage); cursor:pointer; transition:border-color .3s var(--ease-3), color .3s var(--ease-3);
}
.own-photo-upload-tile:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------------- PRODUCT CARD — expanded Product Editor (Vendor
   Card v3, Round 5 FULL REBUILD).

   The old vertical-form presentation (.own-pe-header / .own-pe-
   form-compact, three rounds of shrink-the-same-structure patches)
   is gone. This is a genuinely different presentational structure:
   ONE bordered card (.own-pec) — compact header, then six editorial
   sections (numbered label + hairline rule + compact content) inside
   that same card, never six separate boxed sub-cards.

   Fully self-contained (own-pec-* classes, own dedicated input/
   textarea/chip-track rules) rather than scoped overrides of shared
   .field/.own-textarea/.own-form-section/.own-field-row/.pe-chip-grid
   rules — those stay completely untouched, so every other numbered-
   section form in the app (Client/Agent/Vendor Basic Information,
   Trade Terms, etc.) is unaffected by anything below. Chip BUTTONS
   still use the shared .pe-chip class deliberately (wireChipGroup/
   wireChipGroupWithAdd/syncChipOptionsIntoGrid all select on it) —
   only the track that contains them is new. ---------------- */
.own-pec{ border:1px solid var(--line); background:var(--ivory); margin:16px 0 24px; }

.own-pec-header{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); }
.own-pec-header-figure{ position:relative; width:52px; height:52px; flex:none; overflow:hidden; background:var(--clay); }
.own-pec-header-figure img{ width:100%; height:100%; object-fit:cover; }
.own-pec-header-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.own-pec-header-name{ font:400 19px var(--serif); letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.own-pec-header-meta{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.own-pec-header-price{ flex:none; font:13px var(--mono); color:var(--ink); white-space:nowrap; }
.own-pec-header-close{ flex:none; }
@media (max-width:640px){
  .own-pec-header{ flex-wrap:wrap; }
  .own-pec-header-price{ order:3; }
}

.own-pec-form{ padding:12px 18px 14px; }
.own-pec-section{ padding:10px 0; border-bottom:1px solid var(--line); }
.own-pec-section:last-of-type{ border-bottom:none; }
.own-pec-section-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.own-pec-section-num{ font:10px var(--mono); color:var(--brass); letter-spacing:.08em; }
.own-pec-section-title{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }

/* Basic Information / Pricing rows — Name+URL, Price+Discount, each
   pair sharing one row on desktop and stacking on narrow viewports. */
.own-pec-grid{ display:flex; gap:16px; flex-wrap:wrap; }
.own-pec-grid--2 > .own-pec-field{ flex:1 1 220px; }

.own-pec-field{ display:flex; flex-direction:column; gap:6px; }
.own-pec-field--full{ width:100%; }
.own-pec-field-label{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.own-pec-input, .own-pec-textarea{
  width:100%; border:1px solid var(--line); border-radius:3px; background:var(--ivory);
  font:13px var(--sans); color:var(--ink); padding:8px 10px; outline:none;
  transition:border-color .2s var(--ease-3);
}
.own-pec-textarea{ resize:vertical; min-height:52px; max-height:140px; line-height:1.5; font-family:var(--sans); }
.own-pec-input:focus, .own-pec-textarea:focus{ border-color:var(--ink); }
.own-pec-input::placeholder, .own-pec-textarea::placeholder{ color:var(--sage); }
.own-pec-hint{ margin-top:8px; font:11px/1.5 var(--sans); color:var(--sage); }

/* Category / Subcategory — one compact horizontal-scroll track each,
   never a vertical wall of chips and never a nested vertical
   scrollbar (overflow-y is never set to auto/scroll here). */
.own-pec-taxonomy + .own-pec-taxonomy{ margin-top:12px; }
.own-pec-taxonomy-label{ display:block; margin-bottom:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.own-pec-taxonomy-track{
  display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px;
  scrollbar-width:thin;
}
.own-pec-taxonomy-track::-webkit-scrollbar{ height:4px; }
.own-pec-taxonomy-track::-webkit-scrollbar-thumb{ background:var(--line); }
.own-pec-taxonomy-track .pe-chip{
  flex:0 0 auto; white-space:nowrap; font-size:11px; padding:7px 12px; border-radius:0;
}
.own-pec-taxonomy-add{ display:flex; gap:10px; align-items:center; margin-top:6px; max-width:320px; }
.own-pec-taxonomy-add[hidden]{ display:none; }
.own-pec-taxonomy-add input{
  flex:1; border:1px solid var(--line); border-radius:3px; background:var(--ivory);
  font:12px var(--sans); color:var(--ink); padding:6px 10px; outline:none; transition:border-color .2s var(--ease-3);
}
.own-pec-taxonomy-add input:focus{ border-color:var(--ink); }
.own-pec-taxonomy-toggle{ margin-top:6px; }
.own-pec-taxonomy-toggle[hidden]{ display:none; }

/* Photography — a compact horizontal strip of small thumbnails, not
   a tall auto-fill gallery grid. */
.own-pec-photo-strip{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.own-pec-photo-strip .own-photo-tile{ flex:0 0 64px; width:64px; height:64px; }
.own-pec-photo-add{ flex:0 0 64px; width:64px; height:64px; }

/* Colors — one horizontal row: chips + inline add field + button,
   never stacked vertically. */
.own-pec-colors{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.own-pec-colors-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.own-pec-colors-input{
  flex:1; min-width:160px; border:1px solid var(--line); border-radius:3px; background:var(--ivory);
  font:12px var(--sans); color:var(--ink); padding:7px 10px; outline:none; transition:border-color .2s var(--ease-3);
}
.own-pec-colors-input:focus{ border-color:var(--ink); }

.own-pec-actions{ display:flex; align-items:center; justify-content:flex-end; gap:20px; padding-top:13px; }

.own-photo-upload-tile span{ font:400 22px var(--serif); }
.own-photo-upload-tile small{ font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:900px){ .own-photo-main{ grid-template-columns:1fr; gap:28px; } }

/* ---------------- PRODUCTS — image-led editorial rows, grouped by category ---------------- */
.own-category-group{ margin-top:52px; }
.own-category-group:first-child{ margin-top:24px; }
.own-category-title{ font:400 22px var(--serif); letter-spacing:-.01em; }
.own-category-count{ margin-left:12px; font:10px var(--mono); color:var(--sage); letter-spacing:.06em; }
.own-product-list{ margin-top:14px; border-top:1px solid var(--line); }
/* Compact row (Vendor Card v3 correction): smaller fixed thumbnail
   column (was 140px) and tighter vertical padding — a collapsed
   product should read as one scannable catalog line, not a tall
   block. */
.own-product-row{ display:grid; grid-template-columns:88px 1fr auto; gap:22px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.own-product-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-product-figure img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform .8s var(--ease-4); }
.own-product-row:hover .own-product-figure img{ transform:scale(1); }
.own-product-tag{ position:absolute; left:6px; top:6px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ivory); background:rgba(27,28,25,.6); padding:2px 6px; }
.own-product-name{ font:400 17px var(--serif); letter-spacing:-.01em; }
/* Truncated to 2 lines — the full description stays available in the
   expanded editor; this is what kept a long real description from
   inflating the collapsed row's height (e.g. a multi-sentence product
   description used to make a "collapsed" row taller than the
   editor's own header). */
.own-product-desc{ margin-top:3px; font:12px/1.5 var(--sans); color:#5a5b54; max-width:52ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.own-product-meta{ margin-top:6px; display:flex; gap:14px; flex-wrap:wrap; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.own-product-price{ font:15px var(--serif); color:var(--ink); }
.own-product-price s{ margin-left:8px; font-size:12px; color:var(--sage); }
.own-product-actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
@media (max-width:900px){ .own-product-row{ grid-template-columns:64px 1fr; } .own-product-actions{ grid-column:1 / -1; flex-direction:row; margin-top:4px; } }

/* ---------------- CATALOG — larger showcase variant ---------------- */
.own-catalog-subgroup{ margin:26px 0 0; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); padding-top:20px; border-top:1px solid var(--line); }
.own-catalog-row{ display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.own-catalog-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-catalog-figure img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1s var(--ease-4); }
.own-catalog-row:hover .own-catalog-figure img{ transform:scale(1); }
.own-catalog-name{ font:400 clamp(20px,2vw,28px)/1.1 var(--serif); letter-spacing:-.02em; }
.own-catalog-meta{ margin-top:8px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }

/* ---------------- PROJECTS tab — reuses .project-row rhythm ---------------- */
.own-vp-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:5vw; align-items:center; padding:48px 0; border-bottom:1px solid var(--line); }
.own-vp-row:nth-child(even){ grid-template-columns:1.1fr 0.9fr; }
.own-vp-row:nth-child(even) .own-vp-figure{ order:2; }
.own-vp-row:nth-child(even) .own-vp-info{ order:1; text-align:right; align-items:flex-end; }
.own-vp-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.own-vp-figure img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.1s var(--ease-4); }
.own-vp-row:hover .own-vp-figure img{ transform:scale(1); }
.own-vp-info{ display:flex; flex-direction:column; gap:14px; }
.own-vp-index{ font:10px var(--mono); color:var(--brass); letter-spacing:.1em; }
.own-vp-name{ font:400 clamp(26px,3.2vw,42px)/1 var(--serif); letter-spacing:-.02em; transition:transform .5s var(--ease-4), color .5s var(--ease-3); }
.own-vp-row:hover .own-vp-name{ transform:translateX(10px); color:var(--sage); }
.own-vp-row:nth-child(even):hover .own-vp-name{ transform:translateX(-10px); }
.own-vp-meta{ display:flex; gap:16px; flex-wrap:wrap; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.own-vp-row:nth-child(even) .own-vp-meta{ justify-content:flex-end; }
.own-vp-desc{ font:13px/1.6 var(--sans); color:#5a5b54; max-width:46ch; }
.own-vp-row:nth-child(even) .own-vp-desc{ margin-left:auto; }
.own-vp-view{ display:inline-flex; align-items:center; gap:8px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease-3), transform .4s var(--ease-3); }
.own-vp-row:hover .own-vp-view{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .own-vp-row, .own-vp-row:nth-child(even){ grid-template-columns:1fr; gap:20px; padding:32px 0; }
  .own-vp-row:nth-child(even) .own-vp-figure{ order:0; }
  .own-vp-row:nth-child(even) .own-vp-info{ order:0; text-align:left; align-items:flex-start; }
  .own-vp-row:nth-child(even) .own-vp-meta, .own-vp-row:nth-child(even) .own-vp-desc{ margin-left:0; justify-content:flex-start; }
  .own-vp-view{ opacity:1; transform:none; }
}

/* ---------------- PORTFOLIO — asymmetric editorial gallery ---------------- */
.own-portfolio-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; margin-top:20px; }
.own-portfolio-grid > .own-portfolio-item:nth-child(3n+1){ grid-column:1 / -1; }
.own-portfolio-item figure{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--clay); }
.own-portfolio-grid > .own-portfolio-item:not(:nth-child(3n+1)) figure{ aspect-ratio:3/4; }
.own-portfolio-item img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform 1s var(--ease-4); }
.own-portfolio-item:hover img{ transform:scale(1); }
.own-portfolio-cap{ margin-top:14px; display:flex; justify-content:space-between; gap:12px; }
.own-portfolio-cap b{ font:400 18px var(--serif); }
.own-portfolio-cap span{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
@media (max-width:900px){ .own-portfolio-grid{ grid-template-columns:1fr; } .own-portfolio-grid > .own-portfolio-item:nth-child(3n+1){ grid-column:auto; } .own-portfolio-grid > .own-portfolio-item figure, .own-portfolio-grid > .own-portfolio-item:not(:nth-child(3n+1)) figure{ aspect-ratio:4/3; } }

/* ---------------- CLASSIFICATION — numbered groups, square selections ---------------- */
.own-classif-group{ padding:36px 0; border-bottom:1px solid var(--line); }
.own-classif-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.own-classif-title{ display:flex; align-items:baseline; gap:12px; }
.own-classif-actions{ display:flex; gap:18px; }

/* ---------------- DOCUMENTS ---------------- */
.own-doc-upload{
  display:flex; align-items:center; gap:16px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  cursor:pointer; color:var(--sage); transition:color .3s var(--ease-3);
}
.own-doc-upload:hover{ color:var(--ink); }
.own-doc-upload span{ font:400 22px var(--serif); line-height:1; }
.own-doc-upload b{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink); display:block; }
.own-doc-upload small{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.own-doc-list{ margin-top:4px; }
.own-doc-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.own-doc-name{ font:15px var(--sans); color:var(--ink); }
.own-doc-meta{ margin-top:4px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.own-doc-actions{ display:flex; gap:18px; opacity:0; transition:opacity .3s var(--ease-3); flex:none; }
.own-doc-row:hover .own-doc-actions{ opacity:1; }
@media (max-width:900px){ .own-doc-actions{ opacity:1; } }

/* ---------------- HISTORY ---------------- */
.own-history-list{ margin-top:6px; border-top:1px solid var(--line); }
.own-history-row{ display:grid; grid-template-columns:140px 1fr 160px; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.own-history-stamp{ font:10px var(--mono); color:var(--brass); letter-spacing:.05em; }
.own-history-action{ font:14px var(--sans); color:var(--ink); }
.own-history-actor{ text-align:right; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
@media (max-width:900px){ .own-history-row{ grid-template-columns:1fr; gap:4px; } .own-history-actor{ text-align:left; } }

/* ---------------- internal privacy notice ---------------- */
.own-internal-flag{ display:inline-block; margin-bottom:32px; }

/* ---------------- OVERVIEW TAB — stat rail + activity timeline
   (Vendor Card 00/Overview; distinct from the Owner dashboard's own
   .own-summary-row, which summarizes ALL vendors/clients/projects —
   this is one Vendor's own stat rail). Values are always real counts
   already returned by GET /api/owner/vendors/:id/overview; never
   hardcode a stat here. ---------------- */
.own-ov-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; border:1px solid var(--line); }
.own-ov-stat{ padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.own-ov-stat:last-child{ border-right:none; }
.own-ov-stat .num{ font:400 32px var(--serif); letter-spacing:-.01em; }
.own-ov-stat .lbl{ margin-top:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
@media (max-width:900px){ .own-ov-stat{ border-bottom:1px solid var(--line); } }
.own-ov-timeline{ margin-top:40px; }
.own-ov-row{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }
.own-ov-row .when{ font:10px var(--mono); color:var(--sage); text-transform:uppercase; letter-spacing:.06em; flex:none; }

/* ---------------- STYLE & AESTHETIC — two-column board (chip
   groups + an honest status card). No weighted percentages are drawn
   here — production style_taxonomy stores selection only (no per-
   vendor confidence/weight yet); do not fabricate one. ---------------- */
.own-style-board{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start; }
.own-style-info-card{ border:1px solid var(--line); padding:26px; background:var(--clay); }
.own-style-info-card h3{ font:400 20px var(--serif); margin:0 0 10px; letter-spacing:-.01em; }
.own-style-info-card p{ font:13px/1.6 var(--sans); color:var(--sage); margin:0; }
.own-style-evidence-meta{ margin-top:14px; display:flex; flex-direction:column; gap:4px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
@media (max-width:900px){ .own-style-board{ grid-template-columns:1fr; gap:28px; } }

/* ---------------- Style & Aesthetic — selected-only editorial rows
   (Vendor Card v3 correction): thin hairline rows with a restrained
   confidence bar, not a chip grid. Real vendor_style_classifications
   data only; the confidence bar reflects the real ordinal
   high/medium/low value, never a fabricated exact percentage. ---------------- */
.own-style-group{ margin-bottom:28px; }
.own-style-group:last-child{ margin-bottom:0; }
.own-style-group-title{ display:block; margin-bottom:10px; }
.own-style-row{ display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.own-style-row .name{ flex:1; font-size:14px; }
.own-style-row .bar{ width:120px; height:2px; background:var(--line); position:relative; flex:none; }
.own-style-row .bar > span{ position:absolute; inset:0; background:var(--brass); }
.own-style-row .pct{ width:64px; text-align:right; font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); flex:none; }
@media (max-width:560px){ .own-style-row .bar{ width:60px; } }

/* ---------------- generic image placeholder (prototype has no
   real photography — every figure/photo slot in this concept
   renders as a quiet serif-letter placeholder on --clay, same
   idiom as .agent-card-empty's initial-letter fallback, so the
   layout/typography/rhythm reads correctly without real assets) ---------------- */
.own-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 1em var(--serif); color:var(--sage); background:var(--clay); }
.own-ph.is-static{ position:static; height:100%; }
[data-state="empty"]{ display:none; }
.own-state-toggle{ margin:0 0 18px; }

/* ---------------- Owner Portal shell + Overview/entity
   components (ported from design-concepts/owner-portal/) ---------------- */
/* =========================================================
   OWNER PORTAL — DESIGN CONCEPT (local prototype only)
   Namespace: own-*
   Not wired into production.

   Extends, does not replace, design-concepts/owner-vendor/
   vendor-concept.css (loaded before this file) — every row/
   masthead/tab/form/photo/empty-state pattern already built for
   Vendor (own-*) is reused as-is for Clients/Agents/Products/
   Projects wherever the shape matches. This file adds ONLY:
   (1) the real Owner Portal shell (top nav — distinct from the
   prototype's own left review rail), (2) the Overview/dashboard
   layout, (3) a couple of entity-specific bits Vendor didn't
   need (client/agent/project row meta shapes, relationship
   list). Tokens all come from css/main.css.
   ========================================================= */

/* ---------------- real Owner Portal shell (top header) ----------------
   Header height is pinned to the same var(--nav-h) (88px) as the
   sidebar's own brand block below, AND the border-bottom lives on
   THIS box (.own-shell-inner, height:88px + box-sizing:border-box)
   rather than on the unsized .own-shell wrapper around it — matching
   exactly how .own-rail-brand draws its own border-bottom inside its
   own 88px box. Putting the border on an auto-height wrapper instead
   would add it AFTER that 88px (border-box only affects elements with
   an explicit size), landing the line 1px lower than the sidebar's
   and reintroducing the same stepped seam this is fixing. */
.own-shell{ background:var(--ivory); position:sticky; top:0; z-index:5; }
.own-shell-inner{
  height:var(--nav-h); box-sizing:border-box; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); gap:24px;
}
/* Owner's own shell deliberately carries no wordmark (its single
   brand mark lives in its left rail instead — see the earlier "keep
   only one logo" fix). Agent and Client Portal have no such rail, so
   their shell needs exactly one brand mark of its own; this is that
   mark, reused verbatim wherever a role's shell needs it. */
.own-wordmark{ font:400 20px var(--serif); letter-spacing:-.01em; flex:none; color:var(--ink); text-decoration:none; }
.own-wordmark span{ display:block; margin-top:2px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--brass); }
.own-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.own-nav a{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  padding-bottom:4px; border-bottom:1px solid transparent; transition:color .25s var(--ease-3), border-color .25s var(--ease-3);
}
.own-nav a:hover{ color:var(--ink); }
.own-nav a.is-current{ color:var(--ink); border-bottom-color:var(--brass); }
.own-account{ display:flex; align-items:center; gap:16px; flex:none; }
.own-account-name{ font:11px var(--sans); color:var(--ink); }
.own-account-logout{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); background:none; border:none; cursor:pointer; }
.own-account-logout:hover{ color:#9c5b3e; }
@media (max-width:900px){
  .own-shell-inner{ height:auto; flex-wrap:wrap; gap:14px; padding:14px var(--gutter); }
  .own-nav{ order:3; width:100%; gap:18px; overflow-x:auto; padding-bottom:2px; }
}

/* ---------------- OVERVIEW / DASHBOARD ---------------- */
.own-overview-head{ padding-bottom:8px; }
.own-overview-eyebrow{ display:block; margin-bottom:14px; }
.own-overview-title{ font:400 clamp(34px,4vw,56px)/1 var(--serif); letter-spacing:-.02em; }
.own-summary-row{ display:flex; flex-wrap:wrap; margin-top:48px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.own-summary-item{
  flex:1; min-width:150px; padding:26px 24px; cursor:pointer;
  border-right:1px solid var(--line); transition:background .25s var(--ease-3);
}
.own-summary-item:last-child{ border-right:none; }
.own-summary-item:hover{ background:var(--clay); }
.own-summary-count{ font:400 40px var(--serif); letter-spacing:-.02em; }
.own-summary-label{ margin-top:8px; display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
@media (max-width:900px){ .own-summary-item{ flex:1 1 50%; border-right:none; border-bottom:1px solid var(--line); } }

.own-section{ margin-top:64px; }
.own-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:6px; }
.own-section-title{ font:400 24px var(--serif); letter-spacing:-.01em; }
.own-section-viewall{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.own-section-viewall:hover{ color:var(--ink); }

.own-activity-list{ margin-top:14px; border-top:1px solid var(--line); }
.own-activity-row{ display:grid; grid-template-columns:140px 1fr 140px; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.own-activity-stamp{ font:10px var(--mono); color:var(--brass); letter-spacing:.05em; }
.own-activity-text{ font:14px var(--sans); color:var(--ink); }
.own-activity-entity{ text-align:right; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
@media (max-width:900px){ .own-activity-row{ grid-template-columns:1fr; gap:4px; } .own-activity-entity{ text-align:left; } }

/* ---------------- generic entity row (Clients / Agents / Products /
   Projects list use this — same shape as own-vendor-row, namespaced
   separately only so this file stays self-contained to read) ---------------- */
.own-entity-row{
  display:grid; grid-template-columns:96px 1fr auto; gap:26px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.own-entity-figure{ position:relative; width:96px; aspect-ratio:1/1; overflow:hidden; background:var(--clay); flex:none; }
.own-entity-figure .own-ph{ font-size:22px; }
.own-entity-name{ font:400 clamp(20px,2.2vw,28px)/1.1 var(--serif); letter-spacing:-.01em; transition:transform .4s var(--ease-4), color .4s var(--ease-3); }
.own-entity-row:hover .own-entity-name{ transform:translateX(6px); color:var(--sage); }
.own-entity-meta{ margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.own-entity-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease-3), transform .3s var(--ease-3);
}
.own-entity-row:hover .own-entity-actions{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .own-entity-row{ grid-template-columns:64px 1fr; }
  .own-entity-actions{ grid-column:1 / -1; flex-direction:row; opacity:1; transform:none; margin-top:6px; }
}

/* Project rows use the wider Vendor-Projects-tab shape (image-led,
   alternating) directly — see .own-vp-row in vendor-concept.css. */

/* ---------------- relationship list (used on Client/Agent/Project
   detail to show "→ Projects / → Vendors / → Products" links) ---------------- */
.own-rel-block{ padding:28px 0; border-bottom:1px solid var(--line); }
.own-rel-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; }
.own-rel-list{ display:flex; flex-direction:column; }
.own-rel-item{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.own-rel-item:last-child{ border-bottom:none; }
.own-rel-item a{ color:var(--ink); }
.own-rel-item a:hover{ color:var(--sage); }
.own-rel-item span{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }

/* ---------------- permission / error / loading / no-results ---------------- */
.own-state-panel{ padding:90px var(--gutter); text-align:center; border-top:1px solid var(--line); }
.own-state-panel b{ display:block; font:400 26px var(--serif); margin-bottom:10px; }
.own-state-panel p{ font:13px/1.6 var(--sans); color:var(--sage); max-width:420px; margin:0 auto; }
.own-state-panel.is-error b{ color:#9c5b3e; }
.own-loading-dots{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }

/* ---------------- scoped drift fixes: components reused inside a
   converted Owner Portal screen that are still rounded/pill-shaped
   in their own source file (css/network-agent.css's .an-chip,
   css/agent-port.css's .ag-status-pill/.ag-tag) revert to the
   approved square/plain-text language ONLY here, inside .own-*
   containers — their own file/other portals (Network Agent Portal)
   are untouched. */
.own-form-section .an-chip, .own-classif-group .an-chip{ border-radius:0; }
/* Read-only mode (EDIT AGENT not active): chips still show the
   Agent's current values but are inert — same dimmed treatment as
   the .field input:disabled rule elsewhere in this file. */
.own-form-section .an-chip.is-readonly{ opacity:.55; cursor:default; }
.own-form-section .ag-status-pill,
.own-tab-body .ag-status-pill{ border-radius:0; }

/* Client Detail's Property Type/Preferred Style/Budget Range chips
   (clientProfileFormHtml, #owncd-form) share the SAME .pe-chip
   component wireChipGroup uses across the rest of the Owner Portal
   (Vendor/Product forms) — deliberately not swapped for Agent
   Detail's separate .an-chip component, which is built around a
   different selection model (a hidden text input syncing a comma
   list via wireOwnAgentChipSelect, not a toggled-class array read at
   submit time). This scopes .pe-chip's own visual treatment, inside
   Client Detail only, down to the same compact dimensions/spacing
   .an-chip already has within .own-form-section — the actual visual
   parity this task asks for — without touching the shared .pe-chip
   rule (project.css) that the public Project Experience and every
   other Owner Portal chip picker still use untouched. */
#owncd-form .pe-chip-grid{ gap:6px; }
#owncd-form .pe-chip{ font:11px var(--sans); padding:6px 12px; }
#owncd-form .pe-chip.is-readonly, #owncd-form .pe-chip:disabled{ opacity:.55; cursor:default; }

/* ---------------- left navigation rail — structure, labels,
   numbering, order, typography, colors and hover/active states are
   unchanged from the approved prototype rail. The brand block's own
   box (height + vertical padding) was adjusted to var(--nav-h) — the
   minimum spacing change needed so its border-bottom lands on the
   same y-coordinate as the top header's border-bottom (.own-shell),
   so the sidebar/header hairlines meet in one continuous line
   instead of stepping at the seam. */
.own-app-shell{ display:flex; min-height:100vh; }
.own-rail{
  width:248px; flex:none; border-right:1px solid var(--line); background:var(--ivory);
  position:sticky; top:0; height:100vh; overflow-y:auto; padding:0 0 28px;
}
.own-rail-brand{
  height:var(--nav-h); box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 22px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.own-rail-brand b{ display:block; font:400 20px var(--serif); letter-spacing:-.01em; }
.own-rail-brand span{ display:block; margin-top:6px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.own-rail-group{ padding:16px 22px 6px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--brass); }
.own-rail a{
  display:block; padding:7px 22px; font:12px var(--sans); color:var(--sage); text-decoration:none;
  border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s;
}
.own-rail a:hover{ color:var(--ink); }
.own-rail a.is-active{ color:var(--ink); border-left-color:var(--brass); background:var(--clay); font-weight:500; }
.own-app-main{ flex:1; min-width:0; }
@media (max-width:900px){
  .own-app-shell{ display:block; }
  .own-rail{ position:static; width:auto; height:auto; max-height:220px; border-right:none; border-bottom:1px solid var(--line); }
}

/* =========================================================
   AUTH ENTRY — shared unauthenticated entry/login pages for all
   three portals (Owner, Network Agent, Client). Production
   implementation of the approved local design concept
   (design-concepts/auth-entry/ — owner/, agent/, client/ + its
   auth-entry.css/.js). Loaded here rather than as a fourth CSS file
   because this stylesheet is already the one shared shell layer
   loaded by network/owner/index.html, network/agent/index.html and
   portal.html (see this file's own header comment) — adding these
   classes here keeps one shared auth-entry foundation instead of
   three independent copies, per that task's explicit instruction.

   Component names match the approved prototype exactly: auth-entry,
   auth-visual, auth-panel, auth-brand, auth-eyebrow, auth-title,
   auth-intro, auth-form, auth-field(-row/-hint), auth-row, auth-
   remember, auth-forgot, auth-action(-label), auth-loading-dots,
   auth-secondary, auth-back, auth-oauth-btn, auth-divider.

   Deliberately NOT touched: bannerHtml()'s own .cp-alert output in
   js/owner-app.js / js/network-agent-app.js / js/portal-app.js — that
   function is shared with many authenticated screens in all three
   files, so its class name had to stay .cp-alert. The
   ".auth-panel .cp-alert" rule below reskins it to look like
   auth-alert ONLY inside this new entry-page container; every other
   .cp-alert elsewhere in each app (all outside .auth-panel) is
   completely unaffected. ========================================================= */

.auth-entry{
  min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
.auth-stage{ min-height:100vh; } /* Client Portal's unauth stage wrapper — see js/portal-app.js render() */

.auth-visual{ position:relative; min-height:100vh; background:var(--clay); overflow:hidden; }
.auth-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.auth-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,28,25,0) 55%, rgba(27,28,25,.55) 100%);
}
.auth-visual-credit{
  position:absolute; left:var(--gutter); bottom:32px; z-index:1;
  color:var(--ivory); font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; opacity:.85;
}
.auth-visual-mark{ position:absolute; left:var(--gutter); top:40px; z-index:1; color:var(--ivory); font:400 15px var(--serif); letter-spacing:-.01em; }

.auth-panel{ display:flex; flex-direction:column; justify-content:center; padding:64px clamp(32px,6vw,96px); min-height:100vh; }
.auth-panel-inner{ max-width:400px; width:100%; margin:0 auto; }

.auth-back{
  display:inline-flex; align-items:center; gap:8px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em;
  color:var(--sage); margin-bottom:56px; transition:color .25s var(--ease-3);
}
.auth-back:hover{ color:var(--ink); }
.auth-back .arrow{ display:inline-block; transition:transform .3s var(--ease-4); }
.auth-back:hover .arrow{ transform:translateX(-3px); }

.auth-brand{ display:block; font:400 15px var(--serif); letter-spacing:-.01em; margin-bottom:40px; }
.auth-brand span{ display:block; margin-top:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }

.auth-eyebrow{ display:block; font:500 10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--brass); margin-bottom:18px; }
.auth-title{ font:400 clamp(34px,4.4vw,48px)/1.02 var(--serif); letter-spacing:-.03em; margin:0; }
.auth-intro{ margin:18px 0 0; font:14px/1.7 var(--sans); color:var(--sage); max-width:42ch; }

.auth-form{ margin-top:44px; }
.auth-field-row{ display:flex; gap:14px; }
.auth-field-row > .auth-field{ flex:1; min-width:0; }
.auth-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.auth-field label{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--sage); }
.auth-field input{
  width:100%; font:15px var(--sans); color:var(--ink); padding:13px 15px;
  border:1px solid var(--line); border-radius:3px; background:var(--ivory); outline:none;
  transition:border-color .2s var(--ease-3);
}
.auth-field input::placeholder{ color:#a9a89c; }
.auth-field input:focus{ border-color:var(--ink); }
.auth-field input.is-invalid{ border-color:#b3543c; }
.auth-field-hint{ font-size:11px; color:var(--sage); margin:-10px 0 18px; }

.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-4px 0 30px; font-size:13px; }
.auth-remember{ display:flex; align-items:center; gap:8px; color:var(--sage); }
.auth-remember input{ accent-color:var(--ink); }
.auth-forgot{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); transition:color .2s var(--ease-3); }
.auth-forgot:hover{ color:var(--ink); }

.auth-action{
  width:100%; font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; padding:16px 24px;
  background:var(--ink); color:var(--ivory); border:1px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  transition:background .35s var(--ease-3), color .35s var(--ease-3), opacity .3s;
}
.auth-action:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.auth-action[disabled]{ opacity:.55; cursor:default; pointer-events:none; }
.auth-action .arrow{ transition:transform .35s var(--ease-4); }
.auth-action:hover .arrow{ transform:translateX(3px); }

.auth-loading-dots::after{
  content:"···"; display:inline-block; letter-spacing:2px; width:1.1em; overflow:hidden; vertical-align:bottom;
  animation:auth-dots 1.2s steps(3,end) infinite;
}
@keyframes auth-dots{
  0%{ clip-path:inset(0 100% 0 0); } 33%{ clip-path:inset(0 66% 0 0); } 66%{ clip-path:inset(0 33% 0 0); } 100%{ clip-path:inset(0 0 0 0); }
}

.auth-secondary{ margin-top:28px; text-align:center; font-size:13px; color:var(--sage); }
.auth-secondary a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* Client-only (Owner/Agent have no OAuth in the real auth flow) */
.auth-oauth-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font:12px var(--sans); color:var(--ink); padding:13px 15px; border:1px solid var(--line); background:var(--ivory);
  cursor:pointer; transition:border-color .2s var(--ease-3), background .2s var(--ease-3);
}
.auth-oauth-btn:hover{ border-color:var(--ink); }
.auth-oauth-btn svg{ flex:none; }
.auth-divider{
  display:flex; align-items:center; gap:14px; margin:28px 0;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* Scoped reskin of the shared bannerHtml()/.cp-alert output — see
   this section's header comment for why bannerHtml() itself is
   untouched. */
.auth-panel .cp-alert{
  font-size:13px; line-height:1.6; padding:14px 16px; border:1px solid var(--line); margin-bottom:28px; border-radius:0;
}
.auth-panel .cp-alert.is-error{ border-color:#e3c9be; background:#fbf1ec; color:#9c5b3e; }
.auth-panel .cp-alert.is-ok{ border-color:#c9d3c3; background:#f1f4ee; color:#3f4a3a; }

@media (max-width:1080px){
  .auth-entry{ grid-template-columns:1fr 1fr; }
  .auth-panel{ padding:56px clamp(28px,5vw,64px); }
}
@media (max-width:860px){
  .auth-entry{ grid-template-columns:1fr; }
  .auth-visual{ min-height:38vh; }
  .auth-panel{ min-height:0; padding:48px clamp(24px,6vw,56px) 72px; }
  .auth-back{ margin-bottom:40px; }
}
@media (max-width:480px){
  .auth-visual{ min-height:30vh; }
  .auth-field-row{ flex-direction:column; gap:0; }
  .auth-panel{ padding:36px 22px 56px; }
  .auth-title{ font-size:clamp(28px,8vw,36px); }
}