/*
 * 605 Marine Co — Authored portal base + responsive reproduction.
 *
 * The frozen Claude Design portal screens are authored as inline-styled DOM on
 * top of the DS tokens (see assets/css/ds/). This file supplies ONLY:
 *   1. the small base block the design components declared in their <helmet>
 *      (box-sizing, link colour, portalFade keyframes), scoped to .portal-authored
 *   2. reproductions of the responsive recomposition the DC computed in JS
 *      (desktop nav <-> hamburger, adaptive grids -> single column with hairlines),
 *      expressed as the equivalent @media (max-width:820px) rules so the authored
 *      desktop inline styles are preserved verbatim.
 *   3. prefers-reduced-motion handling.
 *
 * It is scoped under .portal-authored so it can never affect admin or the
 * public site. Loaded AFTER portal-client.css so authored screens win.
 */

.portal-authored,
.portal-authored *,
.portal-authored *::before,
.portal-authored *::after { box-sizing: border-box; }

.portal-authored { -webkit-font-smoothing: antialiased; }

.portal-authored a { color: var(--harbour-700); text-decoration: none; transition: color 140ms ease; }
.portal-authored a:hover { color: var(--navy-900); }

/* Authored screens are fully inline-styled — strip any legacy portal chrome
   that the shared .portal-body CSS would otherwise leak onto forms/fieldsets. */
.portal-authored form,
.portal-authored fieldset {
  margin: 0; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0;
}

/* Authored form-field focus ring (replaces the browser default). */
.portal-authored input { font-family: var(--font-sans); }
.portal-authored input:focus { outline: none; border-color: var(--harbour-700) !important; box-shadow: 0 0 0 3px rgba(31,95,134,0.12); }

@keyframes portalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes portalFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Gallery tiles (hover zoom on the tile image) ---------------------- */
.portal-authored .pa-gtile img { transition: transform 320ms ease, opacity 200ms ease; }
.portal-authored .pa-gtile:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .portal-authored .pa-gtile img { transition: none; }
  .portal-authored .pa-gtile:hover img { transform: none; }
}

/* Ensure the page frame reads ivory even before content injects. */
.portal-body[data-portal-page] { margin: 0; background: var(--ivory-50); }

/* ---- Shell nav: desktop <-> mobile (authored breakpoint 820px) --------- */
.pa-nav-desktop { display: flex; }
.pa-nav-mobile { display: none; }

/* Toggled overlays: authored used component state; we toggle .is-open.
   (An inline display would defeat the [hidden] attribute, so drive it here.) */
.portal-authored .pa-mobile-menu { display: none; }
.portal-authored .pa-mobile-menu.is-open { display: flex; }
.portal-authored .pa-switcher-menu { display: none; }
.portal-authored .pa-switcher-menu.is-open { display: block; }

/* ---- Adaptive registers (What's next, fact strips) ---------------------
   Desktop: border-left + padding-left. Mobile: border-top + top gap.
   Per-section authored spacing is passed via --pa-div-pad / --pa-div-gap
   (defaults match the Dashboard "What's next" trio). */
.pa-cell--divided { border-left: 1px solid var(--border-fine); padding-left: var(--pa-div-pad, clamp(28px, 3.2vw, 52px)); }

@media (max-width: 820px) {
  .pa-nav-desktop { display: none; }
  .pa-nav-mobile { display: inline-flex; }
  .pa-logo img { width: 132px !important; }

  /* Adaptive grids collapse to a single column with top hairline dividers. */
  .pa-grid-adaptive { grid-template-columns: 1fr !important; }
  .pa-cell--divided {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-fine);
    padding-top: var(--pa-div-gap, clamp(24px, 5vw, 30px));
    margin-top: var(--pa-div-gap, clamp(24px, 5vw, 30px));
  }
}

/* ---- Editorial list rows (Reports / Recommendations lists) ------------- */
.portal-authored .pa-rrow { display: flex; gap: clamp(20px, 2.6vw, 36px); align-items: flex-start; }
.portal-authored .pa-rrow:hover { background: var(--ivory-100); }
.pa-rrow-date { flex: none; width: clamp(58px, 7vw, 76px); padding-top: 2px; }
.pa-rrow-cta { flex: none; align-self: center; }

@media (max-width: 820px) {
  .portal-authored .pa-rrow { flex-direction: column; gap: 10px; align-items: stretch; }
  .pa-rrow-date { display: flex; align-items: baseline; gap: 10px; width: auto; padding-top: 0; }
  .pa-rrow-cta { align-self: flex-start; }
}

/* Recommendation list rows (marker column + title + cta). */
.portal-authored .pa-crow { display: flex; gap: clamp(18px, 2.4vw, 30px); align-items: flex-start; }
.portal-authored .pa-crow:hover { background: var(--ivory-100); }
.pa-crow-mark { flex: none; width: clamp(150px, 18vw, 188px); padding-top: 2px; }
.pa-crow-cta { flex: none; align-self: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--harbour-700); }

@media (max-width: 820px) {
  .portal-authored .pa-crow { flex-direction: column; gap: 12px; align-items: stretch; }
  .pa-crow-mark { width: auto; padding-top: 0; }
  .pa-crow-cta { align-self: flex-start; }
}

/* ---- Documents library rows (record + Download) -----------------------
   Desktop: title/meta + actions on one line. Mobile: actions stack below. */
@media (max-width: 820px) {
  .portal-authored .pa-doc-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .portal-authored .pa-doc-actions { padding-top: 0 !important; }
}

/* ---- Service-request attachment rows (View / Download) -----------------
   Desktop: label + actions on one line. Mobile: actions stack below. */
.portal-authored .pa-attach-row { display: flex; gap: 24px; align-items: center; justify-content: space-between; }

@media (max-width: 820px) {
  .portal-authored .pa-attach-row { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ---- Timeline chain experiment ----------------------------------------
   Desktop: [month col | chain gutter | records] grid; sticky month column;
   short connector from the chain gutter to each record. Mobile (≤820px):
   slim edge chain, in-flow month headers, no connectors/depth transforms. */
.portal-authored .pa-tl-grid {
  display: grid;
  grid-template-columns: 120px 44px minmax(0, 1fr);
  column-gap: 28px;
}
.portal-authored .pa-tl-monthcol {
  position: sticky;
  top: 110px;
  align-self: start;
  padding-top: clamp(20px, 2.6vw, 28px);
}

@media (max-width: 820px) {
  .portal-authored .pa-tl-grid { display: block; padding-left: 48px; }
  .portal-authored .pa-tl-monthcol { position: static; padding: 4px 0 16px; }
  .portal-authored .pa-tl-conn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-authored *,
  .portal-authored *::before,
  .portal-authored *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}