/* The app's shell and its home page (iteration 50d, main.js, home.js).
   The views fill the window one at a time (a hidden one is hidden, not
   removed); the home page is a column of the kept calculators, each a
   row with its logo in the model's colours, its ROM's name, its two ways
   in, Calculator and Files, and its ⋯; under them New calculator (the
   models without a ROM, the same rows) and the ROMs' settings
   (iteration 53). The lists and the settings are cards of rows
   (shared/components.css: `.card`, `.card-row`, `.sec-title`, `.badge`,
   `.switch`). Only tokens (shared/tokens.css). */

body { display: flex; flex-direction: column; }
body > [data-view] { flex: 1; min-height: 0; }
body > [data-view][hidden] { display: none; }

:where(#home-view) {
  & {
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: var(--panel);
  }

  .home-bar {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex: none;
    height: var(--bar-top);
    padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
    border-bottom: 1px solid var(--rule);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-right: auto;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .brand .logo { display: block; flex: none; }
  .brand .logo .planet { fill: var(--logo-planet-panel); }
  .brand .logo .ring { stroke: var(--logo-ring-panel); }
  .home-landing, .home-docs { font-size: var(--fs-md); color: var(--accent-text); text-decoration: none; text-underline-offset: 3px; }
  .home-landing:hover, .home-docs:hover { text-decoration: underline; }

  .home-main {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--s6) calc(var(--gutter) + var(--safe-r)) calc(var(--s6) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
    box-sizing: border-box;
  }
  h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.015em; line-height: var(--lh-tight); margin: 0 0 var(--s4); }
  .home-empty { margin: 0 0 var(--s4); }

  /* A card of rows: the calculator's logo, its name and ROM, its ways in. */
  .home-list { list-style: none; margin: 0 0 var(--s5); padding: 0; }
  .home-calc { gap: var(--s3); padding: var(--s3) var(--s4); min-height: 0; }
  .home-calc:hover { background: color-mix(in srgb, var(--hover) 55%, transparent); }
  .home-calc > .logo { flex: none; }
  .home-place { flex: 1; min-width: 0; }
  .home-title {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-tight);
  }
  .home-rom {
    margin: 2px 0 0;
    font-size: var(--fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-rom.error { color: var(--error); }
  .home-rom a { color: var(--accent-text); text-underline-offset: 3px; }
  .home-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
  .home-actions button.icon.more { width: var(--tap); height: var(--tap); }

  h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-tight); margin: 0 0 var(--s2); }
  .home-hint { margin: 0 0 var(--s3); font-size: var(--fs-sm); line-height: var(--lh); }
  .home-hint.error { color: var(--error); }
  .home-new, .home-settings { margin-top: var(--s6); }
  .home-new .home-list { margin-bottom: var(--s3); }

  /* What a choice found, and the offers to take (`Use x for the HP y`). */
  .home-notice {
    margin: 0 0 var(--s4);
    padding: var(--s2) var(--s3);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--accent-soft);
    font-size: var(--fs-md);
  }
  .home-notice p { margin: 0; }
  .home-offers { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin-top: 6px; }
  .home-offers:empty { display: none; }
  .storage-offer:empty { display: none; }
  .storage-offer { margin: 0 0 var(--s4); }

  /* The ROMs' settings: a section with its card of rows (index.html). */
  .home-settings .sec-title { margin: 0; }
  .home-settings .card-row.switch { padding-inline: var(--s4); }
  .home-settings .card-row { padding-inline: var(--s4); }
  .home-storage-row { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .home-storage-row:not(:has(> :not([hidden]))) { display: none; }
  .home-settings .home-storage, .home-settings .home-hint { margin: 0; }
  .home-settings .home-hint:empty { display: none; }
  .home-storage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-size: var(--fs-sm); }
  .home-storage[hidden] { display: none; }

  .home-more { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .home-why { margin: var(--s2) 0 0; font-size: var(--fs-sm); }

  /* Files dragged over the page: they are ROMs here. */
  &.rom-drop .home-main { outline: 3px dashed var(--accent); outline-offset: -8px; }

  /* A phone: the ways in under the calculator's name. */
  @media (max-width: 519px) {
    .home-calc { flex-wrap: wrap; }
    .home-actions { width: 100%; padding-left: calc(36px + var(--s3)); box-sizing: border-box; }
    .home-actions :is(a.button, button:not(.icon)) { flex: 1; }
  }
}