/* Loggio Radar interface styles.
 *
 * Lines 18 to 227 of this file are the approved design at docs/radar/mock.html, extracted
 * verbatim rather than retyped so the built interface cannot drift from what Eric approved.
 * Palette values are traceable to web-portal/ui/src/lib/colors.ts (see web/brand.py).
 * Anything added for the real app that the mock had no need for sits below the marker at the
 * bottom, so the approved block stays diffable against the mock.
 */

  :root { color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { margin: 0; font: 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #fafaf9; }
  img { max-width: 100%; }
  [hidden] { display: none !important; }

  /* Palette sits in Loggio's brand regions: forest green, warm brown and gold, cream grounds. */
  :root {
    --ground: #F5F1E9;
    --surface: #FFFEFA;
    --surface-2: #F7F3ED;
    --ink: #2C2416;
    --ink-2: #6B5D4F;
    --ink-3: #9C8F7D;
    --line: #E0D8CC;
    --accent: #33663D;
    --accent-ink: #FFFEFA;
    --safety: #C8923A;
    --safety-ink: #2C2416;
    --good: #3D7A47;
    --good-soft: #E8F0E4;
    --urgent: #A03030;
    --urgent-soft: #FDF0E2;
    --chip-you: #F5ECD7;
    --chip-loggio: #D4E8D0;
    --brand-bar: #422618;
    --shadow: 0 1px 2px rgba(66,38,24,.08), 0 8px 24px rgba(66,38,24,.07);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #1A1510;
      --surface: #241D16;
      --surface-2: #2C241C;
      --ink: #F1EADF;
      --ink-2: #CDBFAE;
      --ink-3: #9C8F7D;
      --line: #4A3D30;
      --accent: #7FB58B;
      --accent-ink: #1A1510;
      --safety: #D9A757;
      --safety-ink: #1A1510;
      --good: #7FB58B;
      --good-soft: #223A28;
      --urgent: #E07A6A;
      --urgent-soft: #3E2620;
      --chip-you: #3C3024;
      --chip-loggio: #243A2A;
      --brand-bar: #2C2416;
      --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ground: #1A1510;
    --surface: #241D16;
    --surface-2: #2C241C;
    --ink: #F1EADF;
    --ink-2: #CDBFAE;
    --ink-3: #9C8F7D;
    --line: #4A3D30;
    --accent: #7FB58B;
    --accent-ink: #1A1510;
    --safety: #D9A757;
    --safety-ink: #1A1510;
    --good: #7FB58B;
    --good-soft: #223A28;
    --urgent: #E07A6A;
    --urgent-soft: #3E2620;
    --chip-you: #3C3024;
    --chip-loggio: #243A2A;
    --brand-bar: #2C2416;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
    color-scheme: dark;
  }

  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  .app {
    max-width: 540px;
    margin: 0 auto;
    padding: 0 16px calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .display { font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: -.01em; }
  .eyebrow { font-family: "Montserrat", "Segoe UI", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--ink-3); }
  /* Brand rule: the word Loggio is always Montserrat SemiBold, wherever it appears. */
  .brand { font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 600; }

  header.top {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
    background: var(--ground);
    padding: 14px 0 10px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  header.top h1 { margin: 0; font-size: 28px; line-height: 1; font-weight: 700; color: var(--accent); }
  header.top h1 .brand { color: var(--ink); }
  header.top .date { color: var(--ink-2); font-size: 15px; }
  .mocknote {
    background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px;
    padding: 10px 12px; font-size: 14px; color: var(--ink-2); margin: 4px 0 14px;
  }

  .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
  .tile { background: var(--surface); border-radius: 12px; padding: 12px 12px 10px; box-shadow: var(--shadow); }
  .tile .n { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
  .tile .l { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
  .tile.urgent .n { color: var(--urgent); }

  section.panel { display: none; }
  section.panel.active { display: block; }

  .card {
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
    padding: 16px; margin-bottom: 14px; position: relative; overflow: hidden;
    transition: opacity .25s ease, transform .25s ease;
  }
  .card.urgent { border-left: 8px solid var(--safety); }
  .card.done { opacity: .55; }
  .card .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--surface-2); }
  .chip.you { background: var(--chip-you); }
  .chip.loggio { background: var(--chip-loggio); }
  .chip.urgentchip { background: var(--safety); color: var(--safety-ink); border-color: transparent; }
  .chip.manual { background: var(--urgent-soft); color: var(--urgent); border-color: transparent; }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .why { margin: 12px 0 8px; font-size: 15px; color: var(--ink-2); }
  .why b { color: var(--ink); }
  .draft {
    background: var(--surface-2); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap;
    font-size: 16px; line-height: 1.5; border: 1px solid var(--line);
  }
  .draft .link { color: var(--accent); text-decoration: underline; }
  .media { margin: 12px 0 4px; }
  .media .lbl { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
  .beforeafter { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; align-items: end; }
  .beforeafter .cap { font-size: 12px; color: var(--ink-3); margin-top: 4px; text-align: center; }
  .photo { position: relative; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #5F7383 0%, #8A9AA6 55%, #3C4A55 56%, #2C3740 100%); }
  .photo.wide { aspect-ratio: 16/9; }
  .photo.square { aspect-ratio: 1/1; background: linear-gradient(180deg, #55697A 0%, #8A9AA6 62%, #3C4A55 63%, #2C3740 100%); }
  .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .banner { position: absolute; left: 0; right: 0; }
  .banner.topb { top: 8%; display: flex; justify-content: center; }
  .banner.topb span { background: var(--safety); color: var(--safety-ink); font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(12px, 3.8vw, 17px); padding: 5px 10px; transform: rotate(-2deg); }
  .banner.botb { bottom: 0; background: rgba(66,38,24,.9); color: #FFFEFA; padding: 8px 10px; font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: .01em; font-size: clamp(12px, 3.6vw, 16px); display: flex; justify-content: space-between; align-items: baseline; }
  .banner.botb small { font-family: "Atkinson Hyperlegible", sans-serif; text-transform: none; letter-spacing: 0; opacity: .9; }
  .video {
    border-radius: 12px; background: #1B1B1B; aspect-ratio: 16/9; position: relative; overflow: hidden;
    display: grid; place-items: center; color: #fff;
  }
  .video .play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: #1B1B1B; font-size: 22px; }
  .video .caption { position: absolute; bottom: 10px; left: 10px; right: 10px; background: rgba(0,0,0,.6); border-radius: 8px; padding: 6px 8px; font-size: 14px; text-align: center; }
  .video .dur { position: absolute; top: 8px; right: 10px; font-size: 13px; font-variant-numeric: tabular-nums; background: rgba(0,0,0,.6); padding: 2px 6px; border-radius: 6px; }

  .actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 14px; }
  .actions.manual { grid-template-columns: 1fr 1fr; }
  .actions.manual .wide2 { grid-column: 1 / -1; }
  button {
    font: inherit; font-weight: 700; font-size: 17px;
    border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; min-height: 52px;
    background: var(--surface-2); color: var(--ink); cursor: pointer;
  }
  button:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
  button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  button.good { background: var(--good); color: #fff; border-color: transparent; }
  button.quiet { color: var(--ink-2); }
  .status { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
  .status.good { background: var(--good-soft); color: var(--good); }
  .status.info { background: var(--chip-you); color: var(--ink); }
  .card.done .actions { display: none; }
  .card.done .status { display: block; }

  .opp { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; }
  .score { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 28px; line-height: 1; color: var(--safety); text-align: center; font-variant-numeric: tabular-nums; }
  .score small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; margin-top: 2px; }
  .opp h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; text-wrap: balance; }
  .opp .meta { color: var(--ink-2); font-size: 15px; }
  .opp ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
  .opp ul li { margin: 2px 0; }
  .prep { display: none; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
  .card.going .prep { display: block; }
  .prep .item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
  .prep .item:last-child { border-bottom: 0; }
  .prep .item button { min-height: 40px; padding: 8px 12px; font-size: 15px; }

  .setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .setting:last-child { border-bottom: 0; }
  .setting .k { font-weight: 700; }
  .setting .v { color: var(--ink-2); text-align: right; font-size: 15px; }
  .toggle { width: 56px; height: 32px; border-radius: 999px; background: var(--good); position: relative; border: 0; padding: 0; min-height: 0; flex: none; }
  .toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
  .toggle.off { background: var(--line); }
  .toggle.off::after { right: auto; left: 3px; }

  nav.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  nav.tabs .inner { max-width: 540px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  nav.tabs button { background: transparent; border: 0; border-radius: 10px; padding: 8px 4px; min-height: 56px; font-size: 13px; font-weight: 700; color: var(--ink-3); display: grid; gap: 2px; justify-items: center; }
  nav.tabs button .ic { font-size: 22px; line-height: 1; }
  nav.tabs button.active { color: var(--accent); background: var(--chip-you); }
  nav.tabs button .badge { position: absolute; }
  .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--urgent); color: #fff; font-size: 12px; line-height: 20px; margin-left: 4px; font-variant-numeric: tabular-nums; }

  h2.section { font-size: 15px; margin: 18px 0 10px; }
  .muted { color: var(--ink-3); font-size: 14px; }
  @media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* ===========================================================================
   Below this marker: the real app only. Everything above is the approved mock,
   verbatim, so the two stay diffable. Nothing here changes an approved value;
   it covers screens and states the mock had no reason to draw.
   =========================================================================== */

/* The bottom nav is real links here rather than the mock's in-page buttons, so the same
   appearance has to be stated for an anchor. Values copied from nav.tabs button above. */
nav.tabs .tabbtn {
  background: transparent; border: 0; border-radius: 10px; padding: 8px 4px; min-height: 56px;
  font-size: 13px; font-weight: 700; color: var(--ink-3); display: grid; gap: 2px;
  justify-items: center; text-decoration: none; font-family: inherit;
}
nav.tabs .tabbtn .ic { font-size: 22px; line-height: 1; }
nav.tabs .tabbtn.active { color: var(--accent); background: var(--chip-you); }
nav.tabs .tabbtn:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }

/* A link that has to look and tap like a button, at the same 52px floor. */
.btnlink {
  font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; min-height: 52px;
  background: var(--surface-2); color: var(--ink); display: grid; place-items: center;
}
.btnlink.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btnlink:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }

/* Form fields on sign-in and share. 52px to match the buttons beside them. */
.lbl { display: block; font-size: 13px; color: var(--ink-3); margin: 12px 0 6px; }
.field {
  font: inherit; font-size: 17px; width: 100%; box-sizing: border-box; min-height: 52px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink);
}
.field:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
textarea.field { min-height: 96px; }

/* Said on the screen when the publishing side is not connected, so Post being held is visible. */
.notice {
  background: var(--urgent-soft); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px;
}

/* Real photos in the before-and-after blocks, where the mock drew placeholder SVG. */
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A draft being edited in place, and the row that saves it. */
.draft[contenteditable="true"] { border-color: var(--accent); outline: none; }
.editrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* A card that is mid-request. The card stays readable; only the buttons stop taking taps, so a
   double tap cannot send a second post. */
.card.busy .actions { opacity: .5; pointer-events: none; }

/* THE APPROVED MOCK AND THE 48 PIXEL FLOOR DISAGREE HERE, AND THE FLOOR WINS.
   docs/radar/mock.html sets `.prep .item button` to min-height 40px for the inner Review and
   Sign me up controls on an Opportunities card. The charter for this interface says every button
   is at least 48 pixels, and 40 is under it. Raised here rather than edited above, so the block
   extracted from the mock stays byte-comparable to the design Eric approved and the disagreement
   is visible instead of quietly resolved.
   Nothing on a phase 1 screen renders `.prep` today; this lands before the Opportunities screen
   does, which is the point of fixing it now rather than when it is on his phone. */
.prep .item button { min-height: 48px; }

/* THE BOOTH VISIT LIST OPENS IN PLACE. The summary IS the tap target, so it carries the same 48
   pixel floor every other control on this screen does, and the padding is what delivers it rather
   than a height that would leave the text riding the top edge on a wrapped line. `details` is
   native, so the list opens with no javascript and keeps working from the offline shell. */
.prep .prepdetails { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.prep .prepdetails:last-child { border-bottom: 0; }
.prep .prepdetails > summary {
  min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 8px 0; cursor: pointer; list-style: revert;
}
.prep .prepdetails > summary:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
.prep .preplist { margin: 4px 0 8px; padding-left: 20px; }
.prep .preplist li { padding: 6px 0; }

/* FIVE tabs, not the mock's four: the Media screen is one of this seat's five screens and it needs
   its own tab. The mock's `repeat(4, 1fr)` above would wrap the fifth onto a second row. The label
   font steps down one pixel so five labels still fit a narrow phone without truncating; the 56px
   tap height is untouched, because that is the floor and the labels are not. */
nav.tabs .inner { grid-template-columns: repeat(5, 1fr); }
nav.tabs .tabbtn { font-size: 12px; }

/* ===========================================================================
   CONTRAST. Two pairings in the approved mock are unreadable, and both were found by
   MEASURING every text pairing rather than by looking at the screen. Recorded here rather
   than edited into the block above, so the extracted design stays comparable to the mock.
   =========================================================================== */

/* 1. THE OPPORTUNITY SCORE. The mock sets .score to the safety gold, which on the cream card
      surface measures 2.73:1. That fails even the 3:1 large-text bar, and it is the single
      biggest number on the screen, read on a phone in daylight at a trade show. The safety gold
      stays exactly as it is everywhere it is a BACKGROUND or a BORDER (ink on it is 5.56:1);
      only its use as TEXT moves, to the same gold darkened to 5.14:1. Dark mode is unchanged,
      where the gold already measures 7.62:1. */
.score { color: var(--safety-text); }

/* 2. THE GOOD BUTTON IN DARK MODE. The mock hardcodes `color: #fff` rather than using a
      variable, so in dark mode the good buttons (I'm going, I posted it) are white on light
      green: 2.36:1, effectively unreadable. --accent-ink is cream in light and near-black in
      dark, giving 5.11:1 and 7.67:1. This is what the hardcoded value should have been. */
button.good { color: var(--accent-ink); }

/* Settings controls. The mock draws a decorative .toggle with no input behind it, because nothing
   in it saved. These are real checkboxes styled to look the same, so the control the screen shows
   is the control that gets written. The native input stays in the accessibility tree and keeps
   keyboard and screen reader behaviour; only its appearance is replaced. */
.switch { position: relative; display: inline-flex; flex: none;
          min-width: 56px; min-height: 48px; align-items: center; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
                opacity: 0; cursor: pointer; }
.switchtrack { width: 56px; height: 32px; border-radius: 999px; background: var(--line);
               position: relative; transition: background .15s ease; pointer-events: none; }
.switchtrack::after { content: ""; position: absolute; top: 3px; left: 3px;
                      width: 26px; height: 26px; border-radius: 50%; background: #fff;
                      transition: left .15s ease; }
.switch input:checked + .switchtrack { background: var(--good); }
.switch input:checked + .switchtrack::after { left: 27px; }
.switch input:focus-visible + .switchtrack { outline: 3px solid var(--safety); outline-offset: 2px; }

.field.small { width: auto; min-width: 104px; text-align: center; }
.pair { display: flex; gap: 8px; align-items: center; }
.setting textarea.field { margin-top: 8px; }

/* A THIRD STATUS TONE. The mock has good (it worked) and info (neutral). It has nothing for HELD:
   a card the publish gate refused, or one a platform rejected, where Eric's approval stands and
   nothing was sent. Those want attention without reading as a crash, and they must not look the
   same as a manual lane, which is a normal outcome he will hit on most LinkedIn cards.
   Measured 6.33:1 light and 4.76:1 dark, both over the bar. */
.status.warn { background: var(--urgent-soft); color: var(--urgent); }

/* The Media screen's "different words on the picture" status line (SPEC-RADAR 9.2).
   `.status` is display:none and the mock only ever reveals it through `.card.done .status`, which
   is the POSTED path. This line has to appear on a card that is not done and never will be, so it
   needs its own reveal. A modifier rather than a change to `.status` itself, so the posted path
   keeps behaving exactly as the approved design does. */
.status.show { display: block; }

/* The words Radar painted on a picture (pm-6640). This line exists so Eric can read the hook
   WITHOUT zooming into the thumbnail, and so it is still readable in the one case that matters
   most: the banner was refused for contrast and the words are on no picture at all. It is a
   statement about the card, not a caption on any one variant, so it sits above the row of
   thumbnails rather than under one of them.
   `--ink-2` rather than `--ink-3`: the hook is content Eric wrote, not chrome. Both are approved
   palette values already used by the mock. */
.hookline { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.hookline b { color: var(--ink); }
.hookline .muted { font-weight: 400; }

/* ===========================================================================
   PHONE WIDTH (SPEC-RADAR 9.3: renders at phone width without horizontal scrolling)
   ===========================================================================
   `white-space: pre-wrap` on the draft block, which the approved design sets and which is right,
   preserves the line breaks Eric wrote. What it CANNOT do is break a run of characters with no
   space in it, and a URL is exactly that. Section 4.2 has every draft repeat the company website
   wherever the platform allows a link, so a link in a draft is the NORMAL case, not an edge one.

   IT FAILS QUIETLY, WHICH IS WHY IT SURVIVED REVIEW. `.card` carries `overflow: hidden`, so an
   over-wide line is CLIPPED rather than scrolled. The page never scrolls sideways and the rule
   above reads as satisfied, while the END of the line is silently cut off. On the Today screen
   that line is the text Eric is about to approve and send, so he would be tapping Post on a draft
   whose tail he could not see.

   `anywhere` rather than `break-word`: break-word leaves the box's intrinsic size computed from
   the unbroken run, which is the half of this that a grid column still overflows on. */
.draft, .why, .meta, .hookline, .status, .lbl {
  overflow-wrap: anywhere;
}