/*
 * The import: a drop zone that answers when files come near it, a tray that sorts each file before it goes,
 * and a live page where the ring fills, counters roll and rows land one by one.
 * Teal is what came in (actual), violet is planned (library), orange is a file that couldn't be read.
 */
@layer pages {
  .importer-form { display: flex; flex-direction: column; gap: 14px; }

  .drop.big {
    flex: none;
    min-height: 168px;
    padding: 24px;
    justify-content: center;
    text-align: left;
    gap: 18px;
    border-width: 2px;
    transition: border-color .2s, background-color .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s;

    & .drop-orb {
      flex: none;
      display: grid;
      place-items: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--accent-wash);
      transition: transform .3s cubic-bezier(.2, .9, .3, 1.6);
    }
    & .drop-orb svg { width: 28px; height: 28px; }
    & .drop-copy { display: flex; flex-direction: column; gap: 4px; }
    & .drop-copy b { font-family: var(--display); font-size: 20px; letter-spacing: -.01em; }
    & .drop-copy .muted { font-size: 13.5px; }
    & .drop-copy u { color: var(--accent-text); text-underline-offset: 3px; }
    & .when-dragging { display: none; }

    &:hover .drop-orb { transform: translateY(-3px); }
    &:active { transform: scale(.99); }
  }

  .importer.dragging .drop.big {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-wash);
    transform: scale(1.015);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);

    & .drop-orb { background: var(--accent); color: var(--on-accent); transform: translateY(-6px) scale(1.08); animation: orb-bob 0.9s ease-in-out infinite; }
    & .drop-orb svg { color: var(--on-accent); }
    & .when-idle { display: none; }
    & .when-dragging { display: block; }
  }

  @keyframes orb-bob { 50% { transform: translateY(-11px) scale(1.08); } }

  .tray { display: none; flex-direction: column; gap: 12px; }
  .importer.has-files .tray { display: flex; }
  .tray-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }

  .chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
  }

  .chip {
    --kind: var(--muted);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "dot nm sz x" "dot kd kd x";
    align-items: center;
    column-gap: 10px;
    padding: 9px 8px 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-inner);
    background: var(--panel);
    animation: chip-in .35s cubic-bezier(.2, .9, .3, 1.3) both;
    animation-delay: calc(var(--i, 0) * 22ms);

    &.rec { --kind: var(--actual); }
    &.plan { --kind: var(--accent); }
    &.tp { --kind: var(--fatigue); }
    &.zip { --kind: var(--ink); }
    &.other { --kind: var(--fatigue); opacity: .65; }
    &.more { display: block; color: var(--muted); font-size: 13px; text-align: center; border-style: dashed; }

    & .dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: var(--kind); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kind) 16%, transparent); }
    & .nm { grid-area: nm; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .kd { grid-area: kd; font-size: 12px; color: var(--kind); font-weight: 600; }
    & .sz { grid-area: sz; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
    & .x { grid-area: x; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
    & .x:hover { background: var(--bg); color: var(--ink); }
  }

  @keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

  .send { display: none; flex-direction: column; gap: 6px; }
  .importer.sending .send { display: flex; }
  .importer.sending .chip { animation: chip-send 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms); }
  .importer.sending .chip .x { visibility: hidden; }
  .send-prog .track { height: 8px; }
  .send-label { font-size: 13px; font-family: var(--mono); }

  @keyframes chip-send { 50% { border-color: var(--actual); } }

  .importer-submit { align-self: flex-start; }
  .importer.armed:not(.has-files) .importer-submit { display: none; }

  /* Live import */
  .live { display: flex; flex-direction: column; gap: 18px; }

  .live-head {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ring copy" "counts counts" "haul haul";
    gap: 20px 28px;
    align-items: center;
    padding: clamp(20px, 4vw, 32px);
    position: relative;
    overflow: hidden;

    & h1 { font-size: clamp(30px, 5vw, 44px); margin: 2px 0 6px; }
    & .live-copy { grid-area: copy; min-width: 0; }
    & .live-copy > p.muted { max-width: 40em; }
  }

  .live-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

  .ring {
    grid-area: ring;
    position: relative;
    width: 148px;
    height: 148px;

    & > svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
    & circle { fill: none; stroke-width: 10; }
    & .ring-track { stroke: var(--line); }
    & .ring-fill { stroke: var(--actual); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.3, .8, .3, 1), stroke .4s; }
    & .ring-center { position: absolute; inset: 0; display: grid; place-items: center; }
    & .ring-pct { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -.03em; }
    & .ring-pct small { font-size: 18px; color: var(--muted); margin-left: 1px; }
    & .ring-check { width: 56px; height: 56px; color: var(--good); stroke-width: 2.5; animation: check-pop .5s cubic-bezier(.2, .9, .3, 1.6) both; }
    & .ring-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: check-draw .45s .15s ease-out forwards; }

    &.pulse > svg { animation: ring-pulse .38s ease-out; }
  }

  .live-head.pending .ring-fill { stroke-dasharray: 60 300; animation: ring-spin 1.1s linear infinite; transform-origin: center; transform-box: fill-box; }
  .live-head.done .ring-fill { stroke: var(--good); }
  .live-head.failed .ring-fill { stroke: var(--fatigue); }

  .live.landed .live-head.done .ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--good);
    animation: ring-burst .9s ease-out forwards;
    pointer-events: none;
  }

  @keyframes ring-pulse { 40% { transform: rotate(-90deg) scale(1.045); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--actual) 45%, transparent)); } }
  @keyframes ring-spin { to { transform: rotate(360deg); } }
  @keyframes ring-burst { to { transform: scale(2.2); opacity: 0; } }
  @keyframes check-pop { from { transform: scale(.4); opacity: 0; } }
  @keyframes check-draw { to { stroke-dashoffset: 0; } }

  .live-counts {
    grid-area: counts;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

    & > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--bg); --c: var(--ink); }
    & dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    & dd { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
    & .c-good { --c: var(--actual); }
    & .c-plan { --c: var(--accent-text); }
    & .c-warn { --c: var(--fatigue); }
  }

  .live-haul {
    grid-area: haul;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    font-size: 14.5px;
    color: var(--muted);
    padding-top: 4px;

    & b { color: var(--ink); font-weight: 600; }
    & .sports { display: flex; flex-wrap: wrap; gap: 6px; }
    & .sport { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); font-size: 13px; }
    & .sport i { width: 8px; height: 8px; border-radius: 50%; background: var(--actual); }
  }

  .live-feed { display: flex; flex-direction: column; gap: 10px; }
  .feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .feed-head h2 { font-size: 18px; }

  .feed {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-inner);
    background: var(--panel);
    overflow: hidden;
  }

  .feed-item {
    --c: var(--muted);
    display: grid;
    grid-template-columns: 28px minmax(0, 14em) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;

    &:last-child { border-bottom: 0; }
    &.s-imported { --c: var(--actual); }
    &.s-library { --c: var(--accent-text); }
    &.s-failed { --c: var(--fatigue); }

    & .mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-weight: 700; font-size: 13px; }
    & .mark svg { width: 15px; height: 15px; stroke-width: 2.5; }
    & .fn { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .what { min-width: 0; display: flex; flex-direction: column; }
    & .what a { color: var(--ink); font-weight: 600; text-decoration: none; }
    & .what a:hover { color: var(--accent-text); }
    & .what small { color: var(--muted); font-size: 12.5px; }
    & .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }

    &.arriving { animation: feed-in .5s cubic-bezier(.2, .9, .3, 1.2); }
    &.arriving .mark { animation: mark-pop .45s cubic-bezier(.2, .9, .3, 1.8); }
  }

  @keyframes feed-in { from { opacity: 0; transform: translateY(-10px); background: color-mix(in srgb, var(--c) 12%, var(--panel)); } }
  @keyframes mark-pop { from { transform: scale(.3); } }

  @media (prefers-reduced-motion: reduce) {
    .chip, .feed-item.arriving, .feed-item.arriving .mark, .ring.pulse > svg, .ring-check, .live.landed .live-head.done .ring::after { animation: none; }
    .ring-check path { stroke-dashoffset: 0; animation: none; }
    .importer.dragging .drop.big .drop-orb { animation: none; }
  }

  @media (max-width: 760px) {
    .drop.big { min-height: 132px; padding: 18px; gap: 14px; }
    .drop.big .drop-orb { width: 52px; height: 52px; }
    .drop.big .drop-copy b { font-size: 17px; }
    .chips { max-height: none; }

    .live-head { grid-template-columns: auto 1fr; gap: 16px 18px; }
    .live-head h1 { font-size: 28px; }
    .ring { width: 104px; height: 104px; }
    .ring .ring-pct { font-size: 28px; }
    .ring .ring-check { width: 42px; height: 42px; }
    .live-copy > p.muted { font-size: 14px; }
    .live-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .live-counts dd { font-size: 28px; }

    .feed-item {
      grid-template-columns: 26px minmax(0, 1fr) auto;
      grid-template-areas: "mark fn tag" "mark what what";
      row-gap: 2px;
      & .mark { grid-area: mark; align-self: start; }
      & .fn { grid-area: fn; }
      & .tag { grid-area: tag; }
      & .what { grid-area: what; }
    }
  }
}