/* PostWatch Responsive v5 — adaptive iPad, dark-mode, and interaction hardening.
   Integration: load last, after postwatch-icon-language-v4.css.
   This is intentionally an isolated release layer: v4 continues to own route
   composition while v5 corrects shared tokens and the 768–1199px shell. */

:root {
  --pw5-gutter-compact: max(16px, env(safe-area-inset-left, 0px));
  --pw5-gutter-tablet: clamp(18px, 2.35vw, 28px);
  --pw5-lane-bg-start: #0b2037;
  --pw5-lane-bg-end: #173a5d;
  --pw5-lane-text: #ffffff;
  --pw5-lane-muted: #c8d7e6;
  --pw5-lane-line: rgba(255, 255, 255, .16);
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}

body,
body.pw-authenticated #app-root,
body.pw4-authenticated #app-root {
  min-width: 0;
}

/* The document is the single page-scroll owner. Route roots contribute their
   full height while fixed navigation stays outside that flow. */
body.pw-authenticated,
body.pw4-authenticated {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

body.pw-authenticated #app-root,
body.pw4-authenticated #app-root {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

body.pw-authenticated #app-root > *,
body.pw4-authenticated #app-root > * {
  min-width: 0;
  max-width: 100%;
}

body.pw-authenticated.pw4-modal-open,
body.pw4-authenticated.pw4-modal-open,
body.pw-authenticated.docs3-dialog-open,
body.pw4-authenticated.docs3-dialog-open {
  overflow: hidden;
}

body:is(.pw-authenticated, .pw4-authenticated) #app-root :where(.table-wrap, .pwc-table-wrap, .dtr-entry-grid) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Safari zooms focused controls whose computed type is below 16px. Keep the
   field floor without disabling the user's browser/pinch zoom. */
:where(input, select, textarea) {
  font-size: max(16px, 1rem);
}

:where(button, a[href], summary, select, input[type="checkbox"], input[type="radio"], input[type="file"]) {
  touch-action: manipulation;
}

:where(.segmented > a[href], a.icon-btn) {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.icon-btn {
  width: 44px;
  height: 44px;
}

:where(a:not([href]), a[href=""], [aria-disabled="true"], button:disabled) {
  cursor: not-allowed;
}

:where(
  .reports-os,
  .reports-layout,
  .reports-master,
  .reports-detail,
  .draft-cabinet,
  .draft-queue,
  .draft-detail-shell,
  .pwc3,
  .pwc3-layout,
  .pwc3-master,
  .pwc3-detail,
  .pwc-page,
  .pwc4-workspace,
  .pw4-page,
  .pw4-panel
) {
  min-width: 0;
  max-width: 100%;
}

/* V4 conversations replace the legacy two-column shell. Reset that outer
   grid at every width so the new list/thread workspace owns the full canvas. */
body.pw-authenticated .pwc-team.pwc4-enhanced,
body.pw-authenticated .pwc-assistant.pwc4-enhanced {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
}

body.pw-authenticated .pwc-team.pwc4-enhanced > .pwc4-workspace,
body.pw-authenticated .pwc-assistant.pwc4-enhanced > .pwc4-workspace {
  width: 100%;
  min-width: 0;
}

/* Static information must not borrow an action affordance. */
:where(
  .pw4-metric,
  .pw4-panel,
  .pwc3-summary > div,
  .portfolio-signal > div,
  .report-kpis > div,
  .draft-evidence > div,
  .status-pill,
  .draft-status,
  .draft-source,
  .report-risk
):not(a):not(button):not([role="button"]) {
  cursor: default;
}

/* Real actions get consistent cause/effect feedback without layout movement. */
:where(
  .report-client,
  .decision-card,
  .draft-queue-row,
  .pwc3-case-card,
  .pw4-action,
  .pw4-waiting-row,
  .pw4-panel__head a[href]
):not([aria-disabled="true"]) {
  transition:
    background-color var(--pw-motion-fast, 140ms) var(--pw-ease-out, ease-out),
    border-color var(--pw-motion-fast, 140ms) var(--pw-ease-out, ease-out),
    color var(--pw-motion-fast, 140ms) var(--pw-ease-out, ease-out),
    box-shadow var(--pw-motion-fast, 140ms) var(--pw-ease-out, ease-out);
}

:where(
  .report-client,
  .decision-card,
  .draft-queue-row,
  .pwc3-case-card,
  .pw4-action,
  .pw4-waiting-row,
  .pw4-panel__head a[href]
):not([aria-disabled="true"]):focus-visible {
  outline: 3px solid var(--pw-focus, #2e5bff);
  outline-offset: 3px;
}

/* Reports uses a deliberately dark decision lane in both appearances. The
   v4 navy palette becomes light foreground ink in dark mode, so it must not
   also be reused as this background. */
.intelligence-lane {
  border-color: var(--pw5-lane-line);
  background: linear-gradient(135deg, var(--pw5-lane-bg-start), var(--pw5-lane-bg-end));
  background-color: var(--pw5-lane-bg-start);
  color: var(--pw5-lane-text);
}

.intelligence-lane :where(h1, h2, h3, strong, b) {
  color: var(--pw5-lane-text);
}

.intelligence-lane :where(p, small, span),
.intelligence-lane__head p,
.portfolio-signal > div span,
.decision-card > span:nth-child(2) small {
  color: var(--pw5-lane-muted);
}

.intelligence-lane :where(.portfolio-signal > div, .portfolio-signal > p, .decision-card) {
  border-color: var(--pw5-lane-line);
}

.report-risk--attention,
.report-review-note svg,
.draft-status--draft {
  color: #6f3f00;
}

.draft-source--assistant {
  color: #60439e;
}

/* Semantic dark surfaces. These are role tokens, not per-record colors. */
html.dark {
  --pw5-lane-bg-start: #081a2d;
  --pw5-lane-bg-end: #153a5f;
  --pw5-lane-muted: #d5e3ef;
  --pw5-lane-line: rgba(205, 225, 242, .24);
}

html.dark :where(.table-wrap, .pwc-table-wrap) {
  border-color: var(--pw-border);
  background: var(--pw-surface);
}

html.dark :where(.table, .pwc-table) {
  color: var(--pw-text);
}

html.dark :where(.table, .pwc-table) th {
  border-color: var(--pw-border);
  background: var(--pw-surface-muted);
  color: var(--pw-text);
}

html.dark :where(.table, .pwc-table) td {
  border-color: var(--pw-border);
  background: var(--pw-surface);
  color: var(--pw-text);
}

html.dark :where(.table, .pwc-table) tr:hover td {
  background: var(--pw-surface-muted);
}

html.dark .report-risk--attention,
html.dark .report-review-note svg,
html.dark .draft-status--draft {
  color: #ffd58a;
}

html.dark .draft-source--assistant {
  background: color-mix(in srgb, #bca9f1 18%, var(--pw-surface));
  color: #d7c9ff;
}

html.dark .draft-filter.is-active {
  color: var(--pw-text);
}

html.dark .pwc3-button--primary {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
  color: var(--pw-on-primary);
}

html.dark .pwc3-button--primary:hover:not(:disabled),
html.dark .pwc3-button--primary:active:not(:disabled) {
  border-color: var(--pw-primary-hover);
  background: var(--pw-primary-hover);
  color: var(--pw-on-primary);
}

html.dark :where(.btn, .pwc-button, .pw4-button, .pwc3-button):not(
  .btn--primary,
  .pwc-button--primary,
  .pw4-button--primary,
  .pwc3-button--primary,
  .btn--danger,
  .pw4-button--danger,
  .btn--light
) {
  border-color: var(--pw-border-strong);
  background: var(--pw-surface);
  color: var(--pw-text);
}

html.dark .btn--light {
  border-color: #eef4fa;
  background: #eef4fa;
  color: #08111c;
}

/* Phone: safe-area aligned and genuinely edge-to-edge for conversation
   canvases while all other routes retain a calm readable gutter. */
@media (max-width: 767px) {
  body.pw-authenticated #app-root,
  body.pw4-authenticated #app-root {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }

  body:is(.pw-authenticated, .pw4-authenticated):is(
    [data-pw-route="/chat"],
    [data-pw-route="/ai"],
    [data-os-route-key^="#/chat"],
    [data-os-route-key^="#/ai"]
  ) #app-root {
    padding-right: 0;
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    padding-left: 0;
  }

  body.pw-authenticated .pwc-team.pwc4-enhanced,
  body.pw-authenticated .pwc-assistant.pwc4-enhanced {
    height: calc(100dvh - 146px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .pwc3 {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
  }

  /* Calm Nest dock: solid, rounded, and visually stable. Only the active
     destination carries a visible label; inactive icons keep their text in
     the accessibility tree and receive a tooltip from responsive-v5.js. */
  .pw4-bottom-nav {
    inset:
      auto
      max(10px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px));
    min-height: 66px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    background: #0b2037;
    box-shadow: 0 16px 38px -20px rgba(4, 14, 25, .72);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pw4-bottom-item {
    min-height: 52px;
    height: 52px;
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    border-radius: 16px;
    color: #c9d8e6;
  }

  .pw4-bottom-item:hover,
  .pw4-bottom-item:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
  }

  .pw4-bottom-item.is-active {
    background: #ffffff;
    color: #0b2037;
    box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .8);
  }

  .pw4-bottom-item.is-active::after {
    display: none;
  }

  .pw4-bottom-item > span:last-child {
    min-height: 0;
  }

  .pw4-bottom-item:not(.is-active) > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.pw-authenticated #app-root,
  body.pw4-authenticated #app-root {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* iPad and resizable tablet windows use a rail. A 1024px portrait viewport is
   not a desktop canvas; keeping it out of the 264px sidebar mode prevents the
   double-gutter and multi-pane overlap reported on iPad Pro. */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --pw-shell-header: 76px;
  }

  .pw4-sidebar,
  .pw4-mobile-topbar {
    display: none !important;
  }

  .pw4-rail {
    display: flex !important;
  }

  .pw4-utility {
    left: var(--pw-shell-rail);
    display: flex !important;
    min-width: 0;
    padding: 12px var(--pw5-gutter-tablet) 8px;
  }

  .pw4-utility__cluster {
    max-width: 100%;
    gap: 8px;
  }

  .pw4-command-entry {
    min-width: 180px;
    max-width: min(330px, 34vw);
  }

  .pw4-command-entry__copy small {
    display: none;
  }

  .pw4-bell-wrap.is-compact-owned {
    display: none !important;
  }

  .pw4-rail-item:not(.is-active) > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pw4-rail-item.is-active > span:last-child {
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  body.pw-authenticated #bottom-nav-root,
  body.pw4-authenticated #bottom-nav-root {
    display: none !important;
  }

  body.pw-authenticated #app-root,
  body.pw4-authenticated #app-root {
    width: auto;
    max-width: none;
    margin-left: var(--pw-shell-rail);
    padding:
      calc(var(--pw-shell-header) + 14px)
      max(var(--pw5-gutter-tablet), env(safe-area-inset-right, 0px))
      max(42px, env(safe-area-inset-bottom, 0px))
      max(var(--pw5-gutter-tablet), env(safe-area-inset-left, 0px));
  }

  body.pw-authenticated #app-root > *,
  body.pw4-authenticated #app-root > * {
    width: 100%;
    max-width: var(--pw-canvas-max);
    margin-inline: auto;
  }

  body:is(.pw-authenticated, .pw4-authenticated):is(
    [data-pw-route="/chat"],
    [data-pw-route="/ai"],
    [data-os-route-key^="#/chat"],
    [data-os-route-key^="#/ai"]
  ) #app-root {
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
  }

  .pw4-directory {
    justify-content: flex-start;
    padding: 0 0 0 var(--pw-shell-rail);
  }

  .pw4-directory__panel {
    width: min(520px, calc(100vw - var(--pw-shell-rail)));
    height: 100%;
    max-height: none;
    padding: max(18px, var(--pw-safe-top)) 18px max(18px, var(--pw-safe-bottom));
    border: 0;
    border-right: 1px solid var(--pw-border);
    border-radius: 0 var(--pw-radius-sheet) var(--pw-radius-sheet) 0;
  }

  .pw4-directory__handle {
    display: none;
  }

  .pw4-directory__groups {
    grid-template-columns: 1fr;
  }

  .notif-panel,
  .action-center {
    max-width: min(520px, calc(100vw - var(--pw-shell-rail) - 24px)) !important;
    max-height: calc(100dvh - var(--pw-shell-header) - 16px) !important;
  }

  /* Reports: preserve useful list/detail context without desktop-width cards. */
  .reports-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .reports-period .form-field {
    min-width: 0;
  }

  .portfolio-signal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-signal > p {
    grid-column: 1 / -1;
  }

  .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #automated-draft-decision {
    grid-column: span 2;
  }

  .reports-layout {
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.7fr);
    gap: 12px;
  }

  .reports-detail__toolbar {
    flex-wrap: wrap;
  }

  .report-kpis,
  .draft-evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .draft-cabinet {
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.7fr);
  }

  .draft-detail,
  .client-report {
    padding: clamp(16px, 2.2vw, 24px);
  }

  /* Team Activity is a real map/list workspace. Portrait iPads stack map and
     scannable cards; 1024px portrait and landscape retain measured detail. */
  .activity-page,
  .activity-layout,
  .activity-map-card,
  .activity-list-card {
    min-width: 0;
    max-width: 100%;
  }

  .activity-map {
    width: 100%;
    max-width: 100%;
  }

  /* Conversation panes share the screen instead of stretching phone cards. */
  body.pw-authenticated .pwc-team.pwc4-enhanced,
  body.pw-authenticated .pwc-assistant.pwc4-enhanced {
    height: calc(100dvh - var(--pw-shell-header) - 40px);
  }

  body.pw-authenticated .pwc-team.pwc4-enhanced > .pwc4-workspace {
    grid-template-columns: clamp(178px, 25vw, 208px) minmax(0, 1fr);
  }

  body.pw-authenticated .pwc-assistant.pwc4-enhanced > .pwc4-workspace {
    grid-template-columns: clamp(160px, 22vw, 190px) minmax(0, 1fr);
  }

  body.pw-authenticated .pwc4-enhanced .pwc-transcript {
    padding-inline: clamp(14px, 2.5vw, 26px);
  }
}

/* iPad portrait has less usable width after the rail. Keep labels short and
   let primary content own the canvas; no horizontal carousel is introduced. */
@media (min-width: 768px) and (max-width: 899px) {
  .pw4-command-entry {
    min-width: 154px;
    max-width: 220px;
  }

  .pw4-command-entry__copy strong {
    font-size: 14px;
  }

  .reports-detail__toolbar .btn {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
    font-size: 0;
  }

  .reports-detail__toolbar .btn svg {
    width: 19px;
    height: 19px;
  }

  .client-report__head {
    gap: 12px;
  }

  .client-report__head img {
    width: 52px;
    height: 52px;
  }

  body.pw-authenticated .pwc-team.pwc4-enhanced > .pwc4-workspace {
    grid-template-columns: 178px minmax(0, 1fr);
  }

  body.pw-authenticated .pwc-assistant.pwc4-enhanced > .pwc4-workspace {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  body.pw-authenticated .pwc4-enhanced .pwc-toolbar {
    padding-inline: 10px;
  }

  .activity-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .activity-map {
    height: clamp(420px, 42dvh, 520px);
    min-height: 420px;
  }

  .activity-list {
    max-height: none;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .pw4-mobile-topbar,
  .pw4-rail {
    display: none !important;
  }

  .pw4-sidebar,
  .pw4-utility {
    display: flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .report-client,
    .decision-card,
    .draft-queue-row,
    .pwc3-case-card,
    .pw4-action,
    .pw4-waiting-row,
    .pw4-panel__head a[href]
  ) {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .intelligence-lane {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .intelligence-lane :where(h1, h2, h3, p, strong, b, small, span),
  .decision-card,
  .portfolio-signal > div,
  .portfolio-signal > p {
    color: CanvasText;
  }
}

@media print {
  .intelligence-lane {
    border-color: #777;
    background: #fff;
    color: #111;
  }

  .intelligence-lane :where(h1, h2, h3, p, strong, b, small, span) {
    color: #111;
  }
}