/* Additions on top of the approved prototype CSS (app.css is left exactly as approved). */
a.c, a.tool, .links a { color: inherit; text-decoration: none; }
a.c { transition: border-color .15s, transform .15s; }
a.c:hover { border-color: var(--teal-d); transform: translateY(-2px); }
a.c:focus-visible, a.tool:focus-visible, .links a:focus-visible, .link:focus-visible { outline: 3px solid rgba(0,168,172,.5); outline-offset: 3px; }
a.tool:hover { background: rgba(255,255,255,.1); }
.links a:hover { color: #fff; }
.linkbtn { text-decoration: none; margin-top: 18px; }
.linkbtn[hidden] { display: none; }
.card[hidden], .proto[hidden] { display: none; }
#toollist { display: grid; gap: 14px; }
/* the tool rows inside #toollist reveal the same way the prototype's did */
.portal.in .tool { opacity: 1; transform: none; }
.pill.ok, .pill.tm, .pill.bad { border: 1px solid; }

/* import page */
.card.wide { max-width: 480px; }
.sel { width: 100%; height: 50px; border: 1.5px solid #64748b; border-radius: 11px; background: #fff; padding: 0 14px; font-size: 17px; color: #0f172a; }
.ctl input[type="file"] { padding: 11px 14px; height: auto; }
.hint { margin: 8px 2px 0; color: #475569; font-size: 14px; }
.results { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.results li { padding: 10px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 600; border: 1px solid #cfd8e3; background: #f4f7fa; color: #0f172a; }
.results li.ok { background: #e3f4f4; border-color: #a8dcde; color: #005a5e; }
.results li.warn { background: #fdf4dc; border-color: #ecd28a; color: #6b4e00; }
.results li.bad { background: #fde8e6; border-color: #f3b8b1; color: #8a1f16; }
.sidelink { display: block; margin-top: 8px; color: #7fe8ec; font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.sidelink:hover { text-decoration: underline; }

/* Portal view renders at 80% (Tony, 2026-10-15), like browser zoom 80%: the container is laid out 125% wide/tall and scaled
   back down. CSS `zoom` is not used because it breaks this page's fixed full-screen layout. Scoped to #portal only, so sign-in
   and the other pages are unchanged; phones keep the normal size. */
@media (min-width: 901px) {
  #portal { --s: .8; inset: auto; top: 0; left: 0; width: calc(100vw / var(--s)); height: calc(100vh / var(--s)); transform: scale(var(--s)); transform-origin: 0 0; }
}

/* Home panel (Tony, 2026-10-15): the white panel is only as wide as its content (the card ends where its title ends),
   the profile lives in the top bar, and the team tools are compact premium boxes, three across.
   Desktop only; narrow screens keep the stacked prototype layout. */
.nav .me.navme { gap: 11px; padding: 5px 16px 5px 6px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(127,232,236,.28); }
.nav .me.navme .av { width: 36px; height: 36px; position: relative; font-size: 15px; }
.nav .me.navme .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #34d399; border: 2px solid #0f172a; }
.nav .me.navme b { display: block; font: 600 14.5px/1.15 var(--body); color: #fff; }
.nav .me.navme small { display: block; margin-top: 1px; color: #94a3b8; font-size: 12px; line-height: 1.2; }
@media (max-width: 900px) { .nav .me.navme small { display: none; } .nav .me.navme { padding-right: 12px; } }

@media (min-width: 901px) {
  .body { grid-template-columns: max-content minmax(0, 1fr); }
  .left { padding: 40px 32px; }
  .left .lede { max-width: 44ch; font-size: 17px; }
  /* two stacked boxes, same width; the whole left side is sized to fit one screen with no scrolling */
  .left .cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .left .cards .c { padding: 18px 20px 16px; min-height: 0; gap: 8px; }
  .left .c h3 { font-size: 20px; }
  /* the paragraph adds no width of its own: the panel is sized by the headline and intro, the boxes wrap to it */
  .left .c p { width: 0; min-width: 100%; font-size: 15px; line-height: 1.5; }
  .left .sec { margin: 22px 0 12px; }

  .right { padding: 44px 52px; gap: 18px; }
  .right h2 { font-size: 34px; }
  .right p { font-size: 17px; }

  #toollist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  #toollist .tool {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" "pill open";
    column-gap: 16px; row-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
    border: 1px solid rgba(127,232,236,.30);
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 28px -14px rgba(0,0,0,.65);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, opacity .5s ease;
  }
  #toollist .tool:hover, #toollist .tool:focus-visible {
    transform: translateY(-3px); border-color: rgba(127,232,236,.75);
    background: linear-gradient(145deg, rgba(0,184,192,.28), rgba(255,255,255,.06));
    box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 34px -14px rgba(0,184,192,.5);
  }
  #toollist .tool .ticon {
    grid-area: icon; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(0,184,192,.38), rgba(0,184,192,.12)); border: 1px solid rgba(127,232,236,.45);
  }
  #toollist .tool .ticon svg { width: 24px; height: 24px; color: #bff6f8; }
  #toollist .tool .tcopy { grid-area: copy; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  #toollist .tool .tname { font: 600 19px/1.2 var(--display); color: #fff; letter-spacing: -.005em; }
  #toollist .tool .tdesc { font: 500 14px/1.35 var(--body); color: #9fb0c5; }
  #toollist .tool .pill { grid-area: pill; margin-left: 0; font-size: 12.5px; padding: 6px 11px; }
  #toollist .tool .opn { grid-area: open; justify-self: end; font-size: 13px; }
}