/* ===========================================================
   The kitchen screen.
   ===========================================================

   Built to published guidance for screens that are looked at but not touched:
   NHTSA's driver distraction guidelines, Google's Design for Driving and
   Android Automotive, Amazon's multimodal (Alexa) guidance, Apple's CarPlay
   HIG, and ANSI/HFES 100 for legibility. What each contributes:

   ONE DOMINANT ELEMENT. Amazon: "The dominant element on each screen should be
   the most important information the customer would need." The mistake worth
   recording here is that the first version of this file made the camera the
   dominant element. A camera is a sensor, not information. Pointed at a pot for
   two seconds a minute and at a chair on the porch the rest of the time, it
   filled eighty percent of the screen with whatever the phone happened to be
   aimed at. The most important information while cooking is what to do now,
   and while a clock is running it is the clock.

   HOW BIG. ANSI/HFES 100 clause 7.2.6.1 sets legibility by visual angle: 16
   arcmin of x-height minimum, 22 comfortable. On a phone that is roughly 28px
   at half a metre, 56px at one metre, 113px at two. So one element is sized
   for across-the-room - the countdown - and the step is sized for the half
   metre where someone actually stands over a pan.

   WHAT THE SCREEN IS NOT FOR. Amazon: "Do not include long texts that repeat
   exactly what Alexa is saying." The chef's spoken sentence is not on this
   screen. The step is - that is not a transcript, it is the reference you
   look at when you missed what he said.

   GLANCE BUDGET. NHTSA accepts a task only if 85% of glances are 2 seconds or
   less. One screen has to be readable in one glance.

   TOUCH. Android Auto: 76x76dp targets, 23dp apart, "based on both the
   driver's distance from the head unit and the need to accommodate quick taps
   while driving". Wet hands are worse than driving, not better.

   NOTHING SCROLLS. NHTSA bans auto-scrolling text and text-for-reading
   outright; Amazon assigns scrolling to touch, which a cook with garlic on
   their hands does not have.

   The media query does not key on a narrow width: a phone with display zoom
   turned down reports a wide viewport and would fall back to the desktop
   layout, which scrolls. Coarse pointer plus portrait is the real condition.
   =========================================================== */

@media (pointer:coarse) and (orientation:portrait), (max-width:820px){

  html,body{overflow:hidden;height:100dvh;overscroll-behavior:none}
  .app{
    height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  /* ---- header: the name, and whether it is hearing you ---------------- */
  .topbar{flex:0 0 auto;padding:8px 14px 6px;gap:10px}
  .topbar .eyebrow{display:none}
  .topbar h1{
    font-size:15px;font-weight:600;font-family:var(--sans);
    color:var(--text-3);margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .top-actions{gap:8px}
  .icon-btn{width:42px;height:42px}
  .live-badge{display:none}          /* the state lives on the bottom edge */

  .progress-track{flex:0 0 auto;padding:0 14px 10px;gap:4px}

  .main-grid{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    /* The desktop grid sets align-items:start. In a column flex container that
       stops items from stretching, and a card whose only content is absolutely
       positioned then measures two pixels wide. */
    align-items:stretch;
    gap:10px;
    padding:0 14px;
  }
  .right-stack{display:contents}

  /* ---- 1. the step. this is the screen. -------------------------------- */
  /* The dominant element gets the room. The step grows into whatever is left and
     centres in it, so the thing a glance has to land on is not squeezed into a
     strip at the top while a camera pointed at nothing takes the rest. */
  .action-card{
    flex:1 1 auto;
    min-height:0;
    order:1;
    padding:18px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .action-card .card-label-row{margin-bottom:6px}
  .action-card .eyebrow{font-size:10px}
  .eta{font-size:11px;padding:4px 9px}
  /* 34px reads at roughly half a metre, which is where someone stands to work
     a pan. This is the one line a glance has to land on. */
  .action-card h2{
    font-size:clamp(30px,8.6vw,38px);
    line-height:1.1;
    margin:0;
  }
  .action-card #stepInstruction{display:none}   /* spoken, not read */
  /* The target state. The instruction is spoken; this is the thing you are aiming
     at, and it stays on screen after he stops talking. */
  .action-card #stepTargetLine{
    display:-webkit-box;
    font-size:18px;
    line-height:1.4;
    margin:9px 0 0;
    color:var(--text-2);
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .chips{margin-top:11px;gap:6px}
  .chips>*{font-size:12.5px;padding:6px 10px}
  .step-note{margin-top:11px;font-size:14px;padding:9px 12px}

  /* ---- 2. the pan, as a band. present, not in charge. ------------------ */
  /* The pan is a band with a fixed share of the screen. It is a sensor: useful
     when it is aimed at something, worth nothing when it is not, and never worth
     more room than the step. */
  .visual-card{
    flex:0 0 30dvh;
    order:2;
    padding:0;
    overflow:hidden;
    position:relative;
  }
  .visual-card .reference-wrap{
    position:absolute;inset:0;
    border-radius:0;
    aspect-ratio:auto;
  }
  /* The step is already on screen above, so the band does not repeat it. */
  .target-card{display:none}
  .live-toggle{inset-block-end:8px;inset-inline-start:8px;width:34px;height:34px}

  /* While Chef Eyes is actually looking, the pan does take the screen - that is
     the one moment the picture is the information. */
  body.looking .action-card,
  body.looking .parallel-card,
  body.looking .timers-card{display:none}
  body.looking .visual-card{flex:1 1 auto}

  /* ---- 3. the clock, when there is one, owns everything ---------------- */
  .hero-timer{
    position:absolute;
    inset-inline:0;inset-block-end:0;
    padding:20px 14px 16px;
    display:flex;flex-direction:column;align-items:center;gap:0;
    background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 60%,rgba(0,0,0,0));
    pointer-events:none;
  }
  .hero-timer strong{
    font-family:var(--mono);
    font-size:clamp(64px,21vw,104px);
    line-height:.92;font-weight:700;color:#fff;
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;
    text-shadow:0 2px 22px rgba(0,0,0,.75);
  }
  .hero-timer span{font-size:14px;font-weight:600;color:rgba(255,255,255,.8)}
  .hero-timer[data-urgent="1"] strong{color:#FF8A5A}

  /* A running clock is the most important thing on the screen, so the band it
     sits in grows and the step gives up its second line to pay for it. */
  body.has-timer .visual-card{flex:0 0 38dvh}
  body.has-timer .action-card #stepTargetLine{-webkit-line-clamp:1}
  body.has-timer .chips{display:none}
  body.has-timer .parallel-card{display:none}

  /* ---- 4. what is spoken rather than shown ----------------------------- */
  .parallel-card{
    flex:0 0 auto;order:3;
    padding:9px 14px;
    display:flex;align-items:center;gap:9px;
  }
  .parallel-card .muted-small{display:none}
  .parallel-card strong{font-size:13.5px;font-weight:600}
  .parallel-icon{width:20px;height:20px;font-size:12px;flex:none}
  /* The list of timers is a list, and a list is what a glance cannot read. The
     one that matters is already the hero. */
  .timers-card{display:none}
  .notes-card{display:none}
  /* The chef's own sentence is heard, not read. */
  .chef-copy,.chef-avatar{display:none}

  /* ---- 5. two targets, at the size a wet hand can hit ------------------- */
  .chef-card{
    position:static;
    flex:0 0 auto;
    display:flex;align-items:center;
    gap:23px;                        /* Android Auto: 23dp of dead space */
    padding:10px 14px max(10px,env(safe-area-inset-bottom));
    background:var(--bg);
    border-top:1px solid var(--line);
    box-shadow:none;backdrop-filter:none;
    margin-top:10px;
  }
  .chef-card::before{display:none}
  .chef-main{display:contents}
  .chef-actions{display:contents}

  /* Amazon's attention system, on the bottom edge: idle, listening, thinking and
     speaking each visually distinct, never a full-screen overlay. */
  .state-strip{
    flex:1 1 auto;min-width:0;
    display:flex;align-items:center;gap:9px;
    height:72px;padding:0 16px;
    border-radius:16px;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--text-2);
    font-size:15px;font-weight:600;
    white-space:nowrap;overflow:hidden;
  }
  .state-strip #stateText{overflow:hidden;text-overflow:ellipsis}
  .state-strip .live-dot{width:10px;height:10px;flex:none}

  .eyes-btn{
    flex:0 0 auto;
    min-width:130px;
    width:auto;                      /* the tablet block above stretches it to 100% */
    height:72px;                     /* Android Auto: 76x76dp; 72 with the 23dp gap */
    border-radius:16px;
    font-size:17px;font-weight:700;
    white-space:nowrap;
  }
  /* The rest always had a voice equivalent. Amazon's rule is that every touch
     target needs one, not that every voice command needs a target. */
  .chef-actions>button{display:none}

  .presenter-bar{
    flex:0 0 auto;
    margin:0;padding:8px 14px 0;
    border:0;gap:8px;
  }
  .presenter-bar span{display:none}
  .presenter-bar button{flex:1;min-height:52px}

  .vision-result{inset-inline:10px;inset-block-end:10px}
  .vision-result strong{font-size:19px}
  .vision-result p{font-size:15px}

  .toast{inset-block-end:calc(104px + env(safe-area-inset-bottom));font-size:14px}
}