/* ===========================================================================
   Home: the widget grid and the News widget (templates/home.html,
   templates/home/_news_widget.html, static/js/home_grid.js).

   Four columns of equal width and rows of a fixed height, so a widget's size
   in the layout document (app/core/homelayout.py) is its size on the screen.
   Each widget carries its cell as custom properties (--c, --r, --w, --h,
   1-based for the column and row), which is what lets the phone rule below
   undo all four at once.

   Under 760px the grid is one column and the widgets stack in the order they
   are in the page, which the server and the script keep as reading order: top
   row first, left to right. A widget then takes the height its content needs.

   Tokens only from app_shell.css; the canvas the screens were designed on
   used the same ones.
   =========================================================================== */

.home { --home-row: 140px; --home-gap: var(--eg-4); }

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--eg-2);
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--eg-radius);
    border: 1px solid var(--eg-line-2);
    background: var(--eg-surface);
    color: var(--eg-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.home-btn:hover { border-color: var(--eg-accent); color: var(--eg-accent-dark); text-decoration: none; }
.home-btn.primary { background: var(--eg-accent); border-color: var(--eg-accent); color: #fff; }
.home-btn.primary:hover { background: var(--eg-accent-dark); color: #fff; }
.home-btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- the visitor's welcome ------------------------------------------------- */
.home-welcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eg-2) var(--eg-3);
    margin-bottom: var(--eg-4);
}
.home-welcome p { margin: 0 var(--eg-2) 0 0; font-size: 15px; color: var(--eg-ink); }
.home-welcome .btn { min-height: 44px; display: inline-flex; align-items: center; }
.home-about { font-size: 13px; font-weight: 600; color: var(--eg-accent); }

/* --- Customize ------------------------------------------------------------- */
.home-editbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eg-3);
    padding: var(--eg-3) var(--eg-4);
    margin-bottom: var(--eg-4);
    border: 1px solid var(--eg-accent-line);
    background: var(--eg-accent-soft);
    border-radius: 6px;
    color: var(--eg-accent-dark);
}
.home-editbar[hidden] { display: none; }
.home-editbar-t { flex: 1 1 300px; min-width: 0; }
.home-editbar-t span { display: block; font-size: 13px; color: #3f525c; }

.home-status { min-height: 20px; margin: 0 0 var(--eg-3); font-size: 13px; color: var(--eg-accent-dark); }
.home-status.is-bad { color: var(--eg-wait); }
.home-status a { color: inherit; font-weight: 600; text-decoration: underline; }
.home-note { margin: var(--eg-3) 0 0; font-size: 12px; color: var(--eg-muted-2); max-width: 70ch; }
.home-note[hidden] { display: none; }

.home-empty { padding: var(--eg-6) var(--eg-5); border: 1.5px dashed var(--eg-accent-line); border-radius: 6px;
              text-align: center; color: #3f525c; font-size: 14px; }
.home-empty[hidden] { display: none; }
.home-empty p { margin: 0; }

/* --- the grid --------------------------------------------------------------- */
.home-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 1), var(--home-row));
    grid-auto-rows: var(--home-row);
    gap: var(--home-gap);
}
.home-widget {
    grid-column: var(--c) / span var(--w);
    grid-row: var(--r) / span var(--h);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--eg-surface);
    border: 1px solid var(--eg-line);
    border-radius: 6px;
}
.home-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* The empty cells, drawn only in Customize, behind the widgets. */
.home-cell {
    border: 1.5px dashed #dfe6e3;
    border-radius: 6px;
    z-index: 0;
}
.home.is-dragging .home-cell { border-color: #b9cbc4; }
.home-foot {
    z-index: 2;
    border-radius: 6px;
    pointer-events: none;
    border: 2px solid var(--eg-accent);
    background: rgba(232, 242, 239, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--eg-accent-dark);
}
.home-foot.is-bad { border-color: var(--eg-wait); background: rgba(252, 243, 223, .85); color: var(--eg-wait); }

.home.is-editing .home-widget {
    border-color: var(--eg-accent-line);
    box-shadow: 0 8px 22px rgba(23, 43, 53, .10);
}
.home.is-editing .home-widget.is-lifted { opacity: .45; }

.home-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--eg-rail);
    border-bottom: 1px solid var(--eg-line);
}
.home-handle, .home-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--eg-radius);
    border: 1px solid transparent;
    background: transparent;
    color: #3f525c;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.home-handle { cursor: grab; touch-action: none; color: var(--eg-muted-2); }
.home-handle:active { cursor: grabbing; }
.home-handle:hover, .home-ib:hover { border-color: var(--eg-line-2); background: var(--eg-surface); color: var(--eg-accent-dark); }
.home-moves { margin-left: auto; display: inline-flex; flex-wrap: wrap; }
.home-sel {
    height: 44px;
    max-width: 100%;
    padding: 0 6px;
    border: 1px solid var(--eg-line-2);
    border-radius: var(--eg-radius);
    background: var(--eg-surface);
    color: var(--eg-ink);
    font: inherit;
    font-size: 13px;
}

/* --- the News widget -------------------------------------------------------- */
.hn { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hn-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--eg-3); padding: var(--eg-3) var(--eg-4) 10px; }
.hn-title { margin: 0; font-family: var(--eg-serif); font-size: 18px; font-weight: 400; }
.hn-sub { font-size: 12px; color: var(--eg-muted-2); }
.hn-all { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--eg-accent); }

.hn-band { margin: 0; padding: 10px var(--eg-4); background: #eef1f0; font-size: 13px; color: #3f525c; }
.hn-band.is-stale { background: var(--eg-wait-bg); color: var(--eg-wait); border-bottom: 1px solid var(--eg-wait-line); }

.hn-list { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; }
.hn-item { border-top: 1px solid #eef1f0; }
.hn-link {
    display: flex;
    gap: var(--eg-3);
    padding: 9px var(--eg-4);
    color: var(--eg-ink);
    text-decoration: none;
}
.hn-link:hover { background: #fafbfa; color: var(--eg-ink); text-decoration: none; }
.hn-link:hover .hn-text { text-decoration: underline; }
.hn-time {
    flex: 0 0 44px;
    font-family: var(--eg-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--eg-muted-2);
}
.hn-day { display: block; }
.hn-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hn-text { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hn-meta { display: flex; flex-wrap: wrap; gap: 4px var(--eg-2); font-size: 12px; color: var(--eg-muted-2); }
.hn-theme { color: var(--eg-accent-dark); }
.hn-ticker { font-family: var(--eg-mono); }

.hn-empty { padding: var(--eg-2) var(--eg-4) var(--eg-4); font-size: 13px; color: #3f525c; }
.hn-empty p { margin: 0 0 var(--eg-3); max-width: 46ch; }
.hn-empty .btn { min-height: 44px; display: inline-flex; align-items: center; }

.hn-foot { margin: auto 0 0; padding: 8px var(--eg-4); border-top: 1px solid var(--eg-line); background: var(--eg-rail);
           font-size: 12px; color: var(--eg-muted-2); }

/* Loading: the shape of two lines while a new scope is fetched. */
.hn-skeleton { padding: var(--eg-3) var(--eg-4); display: flex; flex-direction: column; gap: 10px; }
.hn-skeleton span { display: block; height: 12px; border-radius: 4px; background: #eef1f0; }

/* Compact (two rows high): the headline only, one line each. The time and
   the labels are in the link's title. */
.home-widget.is-compact .hn-time,
.home-widget.is-compact .hn-meta,
.home-widget.is-compact .hn-foot { display: none; }
.home-widget.is-compact .hn-link { padding-top: 7px; padding-bottom: 7px; }
.home-widget.is-compact .hn-main { flex: 1 1 auto; }
.home-widget.is-compact .hn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

/* --- a phone ------------------------------------------------------------------ */
@media (max-width: 760px) {
    .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
    .home-widget { grid-column: auto; grid-row: auto; }
    .home-cell, .home-foot { display: none; }
    .home-widget.is-compact .hn-time, .home-widget.is-compact .hn-meta { display: none; }
}

/* A visitor's Home starts with the grid. The page title stays in the accessibility tree for screen
   readers, hidden the way .shell-sr hides things (in the flow, clip-path), so nothing shifts. */
[data-home-visitor] .shell-title {
    display: block;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Nothing to say, no room taken: a visitor never customizes, and a reader only sees it while editing. */
.home-status:empty { min-height: 0; margin: 0; }

/* Reading, a widget ends where its headlines end instead of filling its rows with white; it never grows past
   its area. Customize draws the full footprint, because that is what is being arranged. */
.home:not(.is-editing) .home-widget { align-self: start; max-height: 100%; }