/* Layout and touch-target work, loaded after style.css and account.css so it can refine
   them without editing rules those files still own.

   Three things this fixes: a recordings table that could only be read by scrolling it
   sideways on a phone, actions that were 11px glyphs with no label and no tap area, and
   a mobile menu that hid the sign-out button entirely. */

/* ---- Actions, at every width ---------------------------------------------------- */

/* A bare glyph is not a button. Everything that acts has a label, a border, and a tap
   area at least 34px tall. */
.small-button,.delete-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 11px;background:#222c24;border:1px solid #33402f;border-radius:6px;color:#bccfbe;font-size:11px}
.small-button:hover{color:var(--green);border-color:#47603f;background:#263327}
.small-button b,.delete-button b{font-weight:450}
.nav b{font-weight:inherit}

/* Removing a watcher and deleting a recording are different acts on different things,
   so they keep different words, but they are the same kind of act and now look alike:
   red from the start rather than only on hover, so the destructive one is the one that
   reads as destructive before it is pressed. */
.small-button.remove,.delete-button{background:#2c211f;border-color:#5a3a33;color:#f0a99c}
.small-button.remove:hover,.delete-button:hover{background:#3a2724;border-color:#8a4a3e;color:#ffc4b8}
.play-button,.download{display:inline-flex;align-items:center;gap:6px;min-height:34px}

/* A td must stay a table-cell: display:flex takes it out of the table layout and its
   bottom border stops lining up with the rest of the row. Spacing is done with margins
   here, and the flex row is applied only on mobile, where cells are blocks anyway. */
.row-actions>*{vertical-align:middle;margin-right:8px}
.row-actions>*:last-child{margin-right:0}
.delete-button{margin-left:14px}

/* ---- Mobile --------------------------------------------------------------------- */

@media(max-width:760px){

  /* The menu becomes a bottom tab bar, which is where a thumb already is, and the top
     strip keeps the brand and the sign-out button that used to be display:none here. */
  aside{position:sticky;top:0;z-index:30;padding:11px 16px;gap:12px;flex-wrap:nowrap}
  .sidebar-bottom{display:flex;align-items:center;gap:12px;margin:0;padding:0}
  .sidebar-bottom p{display:none}
  .server-state span{display:none}
  .quiet{font-size:12px;min-height:34px;display:flex;align-items:center}

  .nav-group{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:#131915;border-top:1px solid var(--line)}
  .nav{position:relative;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;margin:0;padding:7px 4px;font-size:10px;border-radius:8px}
  .nav>span:first-child{font-size:19px}
  /* The count belongs on the tab it counts, not squeezed into the label beside it. */
  .nav-count{display:block;position:absolute;top:4px;left:50%;margin-left:6px;padding:0 5px;font-size:9px;line-height:15px;border-radius:8px}
  /* Room for the bar, plus whatever the phone reserves below it. */
  main{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

  /* Recordings stop being a table and become cards, so every detail is in the viewport
     and nothing needs a sideways scroll to reach. */
  .recordings-table{overflow:visible;background:none;border:0;border-radius:0}
  .recordings-table table{white-space:normal}
  .recordings-table table,.recordings-table tbody,.recordings-table tr,.recordings-table td{display:block;width:100%}
  .recordings-table thead{display:none}
  .recordings-table tr{position:relative;margin-bottom:14px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
  .recordings-table td{padding:0;border:0}
  .recordings-table td small{max-width:none}

  /* Status, length and size get a column each, caption above value, instead of being
     run together on one line. The card is a grid so those three line up down the page
     however long each value turns out to be. */
  .recordings-table tr{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"main main main" "status length size" "actions actions actions";gap:18px 12px}
  .recordings-table .row-main{grid-area:main}
  /* A day's heading is a line between the cards, not a card of its own. */
  .recordings-table tr.day-row{display:block;margin:18px 0 10px;padding:0;background:none;border:0;border-radius:0}
  .recordings-table tr.day-row:first-child{margin-top:0}
  /* channels.css loads after this file, so this has to be the more specific of the two. */
  .recordings-table tbody tr.day-row td{background:none;border:0}
  .day-toggle{flex-wrap:wrap;gap:4px 10px;padding:10px 4px;border-bottom:1px solid var(--line)}
  .day-toggle small{flex-basis:100%;margin:0 0 0 24px!important;white-space:normal}
  .recordings-table .row-actions{grid-area:actions}
  .recordings-table td[data-label="Status"]{grid-area:status}
  .recordings-table td[data-label="Length"]{grid-area:length}
  .recordings-table td[data-label="Size"]{grid-area:size}
  .recordings-table td[data-label]{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:auto;margin:0;font-size:13px}
  .recordings-table td[data-label]::before{content:attr(data-label);color:#7c8d80;font-size:9px;letter-spacing:.9px;text-transform:uppercase}
  .recordings-table .duration{font-size:13px}
  /* Laid out exactly like the buttons on a watched streamer: equal columns across the
     full width with the same gap, rather than bunched at the left edge. */
  /* Specific enough to beat ".recordings-table td{display:block}" above, which was
     quietly winning and leaving these as inline boxes with no gap between them. */
  .recordings-table .row-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:0;padding-top:16px;border-top:1px solid #242e27}
  .recordings-table .row-actions>*{width:100%;margin:0}
  .recordings-table .row-actions:empty{display:none}
  .row-actions .muted{font-size:11px;color:var(--muted)}

  /* The combine tick moves out of the way into the corner, with a real tap area. */
  .recordings-table .pick-cell{position:absolute;top:8px;right:8px;width:auto;padding:0!important}
  .recordings-table .pick-cell input{width:22px;height:22px}
  .row-main{padding-right:34px}

  /* Watched streamers: the card was mostly padding, and its three actions were three
     small glyphs in a row. Tighter box, full-width buttons that can actually be hit. */
  .channel-top{gap:10px;padding:14px 14px 10px}
  .avatar{width:36px;height:36px;font-size:14px}
  .channel-name{max-width:none}
  .channel-details{padding:0 14px 12px}
  .channel-error{padding:0 14px 12px}
  .channel-bottom{flex-direction:column;align-items:stretch;gap:9px;padding:11px 14px}
  .channel-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
  .channel-buttons .small-button{width:100%}
  .delete-button{margin-left:0}

  /* A 36px heading with -1.4px tracking is a desktop heading. */
  .page-heading h1{font-size:24px;letter-spacing:-.9px}
  .breadcrumb span:first-of-type{display:none}
}

/* Very narrow phones only: 390px is a common phone width and fits three labelled
   buttons in a row, so stacking them there would waste the space this is saving. */
@media(max-width:359px){
  .channel-buttons,.recordings-table .row-actions{grid-auto-flow:row;grid-auto-columns:auto}
  .stats{grid-template-columns:1fr 1fr}
  .stats strong{font-size:25px}
}

@media(max-width:760px){
  /* The card was three stacked rows of mostly padding. Status and elapsed time join the
     name block, so a watched streamer costs about a third less height. */
  .channel-details{padding:0 14px 10px;margin-top:-4px}
  .channel-bottom>span{font-size:10px;color:#7c8d80}
  .channel-buttons .small-button{padding:7px 6px;font-size:11px}
  /* An unchecked box on a dark card reads as a broken image at 22px unless it is given
     the same surface as everything else. */
  .recordings-table .pick-cell input{appearance:none;border:1px solid #47573f;border-radius:5px;background:#1b241c}
  .recordings-table .pick-cell input:checked{background:var(--green);border-color:var(--green)}
  .recordings-table .pick-cell input:checked::after{content:"✓";display:block;text-align:center;line-height:20px;color:#1b241c;font-size:14px}
}

@media(max-width:760px){
  /* The name block was the densest part of the card: three lines of 10px text at 1.5
     line-height with 4px between them. */
  .recordings-table .table-name{gap:13px;align-items:flex-start}
  .recordings-table .row-main small{margin-top:6px;font-size:11px;line-height:1.55}
}

/* ---- Desktop table density ------------------------------------------------------- */

/* The same crowding as the cards had: 17px of vertical padding around rows that carry
   three or four lines of text, and 4px between a name and the notes under it. */
@media(min-width:761px){
  .recordings-table td{padding:20px 20px}
  .recordings-table th{padding:14px 20px}
  .recordings-table td small{margin-top:6px;line-height:1.55}
  .recordings-table .table-name{gap:14px}
  /* Numbers read better with room around them than crammed against the next column. */
  .recordings-table .duration,.recordings-table td:nth-last-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
  .row-main{padding-right:28px}
}

/* ---- Join in progress ------------------------------------------------------------ */

/* A combining row has no video yet, so it has no thumbnail, no duration worth showing
   and nothing to act on. The bar is the only thing telling you it is working. */
.combine-progress{margin-top:9px;max-width:320px}
.combine-track{height:5px;border-radius:3px;background:#28342b;overflow:hidden}
.combine-track i{display:block;height:100%;border-radius:3px;background:var(--green);transition:width .4s ease}
.combine-progress small{display:block;margin-top:6px;color:#9fb3a2;font-size:10px}
@media(prefers-reduced-motion:reduce){.combine-track i{transition:none}}
@media(max-width:760px){.combine-progress{max-width:none}}