/* EarthOnline Layoffs: its pages, drawn by src/views.js. Copied from EarthOnline Visa (eol_visa/web/public/visa.css) on
   2026-10-03, its vi- names made lo-, the rules Layoffs does not use left out. Tokens and controls are public/v2/ui.css
   (Chat's); the frame and header public/style.css (Chat's, via Visa). The search line and the cards are EarthOnline
   Chat's lobby (public/v2/home.css, as Visa copied it: Bonan, "所有 bubble 的 searchbar 都是这样才行"); the rules under
   "Layoffs' own" are this site's. Black, white and grey. Pointing at a card or a row changes its ground by one step and
   nothing else; nothing moves but a skeleton's breathing. */

.lo-main { padding: 0 24px 96px; min-height: 60vh; }
@media (max-width: 640px) { .lo-main { padding: 0 16px 64px; } }

/* ---- Chat's lobby, copied ------------------------------------------------------------------------------------------ */
/* the search stays large (Chat, 10-02 night: "searchbar又太小了，可以大气点"): 24px words on a 52px line, and a 24px
   magnifier, whose 2px stroke matches the letters' weight */
.home-lobby { max-width: 640px; margin: 0 auto; padding-top: 24px; }
/* the search: a line, not a box. The words sit on an underline, the magnifier at its right end. Clicking in changes
   nothing (taste: no effect on a field). Text longer than the line scrolls sideways inside it, and the part out of view
   fades out at that edge (app.js sets fade-start / fade-end). */
.home-find { display: flex; align-items: center; gap: 8px; margin: 0; border-bottom: 1px solid var(--line); }
.home-q {
  flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--fg); font: 400 var(--text-2xl)/var(--lh-2xl) var(--font); letter-spacing: var(--tracking-tight);
  outline: none; -webkit-appearance: none; appearance: none;
}
.home-q:focus-visible { outline: none; }
.home-q::-webkit-search-cancel-button, .home-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.home-q.fade-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
.home-q.fade-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px); }
.home-q.fade-start.fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
/* the magnifier is a label: pointing at it changes its colour, nothing else */
.home-find-go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.home-find-go:hover { color: var(--fg); }
/* the magnifier 2px lower than the line's middle, level with the letters' middle */
.home-find-go { position: relative; top: 2px; }

/* the cards: a panel one step up from the page, one step more under the pointer. The link covers the whole card and is
   named by the title. */
.home-list { list-style: none; display: grid; gap: 8px; margin: 20px 0 0; padding: 0; }
.home-item { position: relative; min-width: 0; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); }
.home-item:hover { background: var(--bg3); }
.home-item-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.home-item-link:focus-visible { outline: none; }
.home-item:has(.home-item-link:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
.home-item-title { margin: 0; font: 600 var(--text-lg)/var(--lh-base) var(--font); text-wrap: wrap; }
.home-item-text { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.home-item-by { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 8px 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.home-item .home-at { flex: none; margin: 0 0 0 auto; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
/* two lines at most. When there is more, the end of the second line fades out; when the start was cut off, the start of
   the first line fades in. No "…": a fade, both ends. */
.home-clamp { max-height: 2lh; overflow: hidden; overflow-wrap: anywhere; }
.home-clamp.fade-end {
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1lh) no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1lh) no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
}
.home-clamp.fade-start {
  -webkit-mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 1lh) no-repeat;
  mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 1lh) no-repeat;
}
.home-clamp.fade-start.fade-end {
  -webkit-mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
  mask: linear-gradient(to right, transparent, #000 5em) 0 0 / 100% 1lh no-repeat, linear-gradient(to left, transparent, #000 5em) 0 100% / 100% 1lh no-repeat;
}
/* what the search found: a pale yellow ground under dark letters, the robots' gold mixed with white */
.home-item mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, #FFC93C 55%, #fff); color: var(--on-fg); }
/* nothing found, or nothing yet: said in the middle of the column */
.home-none { margin: 48px 0 0; color: var(--muted); text-align: center; }
/* the next page is on its way: the real card, its ground grey and its words see-through, the whole card breathing */
.home-item.is-skeleton { pointer-events: none; }
.home-item.is-skeleton :is(.home-item-title, .home-item-text, .home-item-by > span) { border-radius: 6px; background: var(--bg3); color: transparent; }
.home-item.is-skeleton b { color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .home-item.is-skeleton, .lo-row.is-skeleton { animation: home-breathe 1.6s ease-in-out infinite; }
}
@keyframes home-breathe { 50% { opacity: .55; } }
/* the next page: a real link for a reader without script ("Older notices"); with script (app.js), an invisible line
   that asks for the next page as it comes near */
a.home-more { display: block; margin: 24px 0 0; color: var(--muted); font-size: var(--text-sm); text-align: center; text-decoration: none; }
a.home-more:hover { color: var(--fg); }
.home-more.is-armed { display: block; height: 1px; margin: 0; overflow: hidden; color: transparent; pointer-events: none; }
@media (max-width: 640px) {
  .home-lobby { padding-top: 16px; }
}

/* a section's title and the count after it (Chat's style.css .sec; taste: the count as large as the title, grey and
   regular; no rule under a title) */
.sec { display: flex; align-items: baseline; gap: 8px; margin: 48px 0 12px; font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.sec-note { color: var(--muted); font-weight: 400; }
.none { margin: 0; color: var(--muted); }

/* ---- Layoffs' own ---------------------------------------------------------------------------------------------------- */
/* the sentence under the search that says what the numbers are; grey, small, one or two lines */
.lo-lead { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; }
.lo-lead a, .lo-note a, .lo-src a { color: var(--muted); }
.lo-lead a:hover, .lo-note a:hover, .lo-src a:hover { color: var(--fg); }
/* the card's figures: the count in white, the rest grey */
.home-item-by > span:not(.home-at) { color: var(--muted); white-space: nowrap; }
.home-item-by b { color: var(--fg); font-weight: 600; }

/* a company, a filing, the data sources: the lobby's 640px column */
.lo-col { max-width: 640px; margin: 0 auto; padding-top: 40px; }
.lo-head { margin: 0; }
.lo-kicker { margin: 0 0 8px; font-size: var(--text-base); }
.lo-kicker a { color: var(--muted); text-decoration: none; }
.lo-kicker a:hover { color: var(--link); }
.lo-title { margin: 0; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.lo-sub { margin: 8px 0 0; color: var(--muted); font-size: var(--text-base); }
.lo-sub b { color: var(--fg); font-weight: 600; }
.lo-also { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.lo-note { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; }
/* where a part's numbers come from: the files, grey, under it */
.lo-src { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
@media (max-width: 640px) { .lo-col { padding-top: 24px; } .lo-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); } }

/* By year, and the states on /data-sources: a small table, numbers to the right, no lines between rows (space sets them
   apart) */
.lo-table-wrap { overflow-x: auto; }
.lo-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--lh-sm); font-variant-numeric: tabular-nums; }
.lo-table th, .lo-table td { padding: 8px 0 8px 16px; text-align: right; vertical-align: top; }
.lo-table th:first-child, .lo-table td:first-child { padding-left: 0; text-align: left; }
.lo-table thead th { color: var(--muted); font-weight: 500; }
.lo-table tbody th { font-weight: 600; }
.lo-table tbody th span { display: block; color: var(--muted); font-weight: 400; }
.lo-table tbody td { font-size: var(--text-base); }
/* a phone: the table keeps its columns in the width */
@media (max-width: 640px) {
  .lo-table th, .lo-table td { padding-left: 10px; }
  .lo-table tbody th span { display: none; }
}

/* By state: Vercel Analytics' top lists. Each row a grey ground as long as its share of the first row's
   count, the name on it, the count at the right. Not links: no hover. */
.lo-bars { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.lo-bars li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 6px 12px; }
.lo-bar { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius); background: var(--bg2); }
.lo-bar-name { position: relative; display: grid; min-width: 0; }
.lo-bar-name small { color: var(--muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-bar-n { position: relative; flex: none; font-variant-numeric: tabular-nums; }

/* A company's notices: rows like the sidebar's, an item list: the title and a grey line; pointed at, one step of ground that reaches
   past the column's edge, so at rest the words line up with the column */
.lo-rows { list-style: none; display: grid; gap: 2px; margin: 0 -12px; padding: 0; }
.lo-row-link { display: grid; min-width: 0; padding: 8px 12px; border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.lo-row-link:hover { background: var(--bg2); }
.lo-row-title { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 500; }
.lo-row-meta { color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.lo-row.is-skeleton { pointer-events: none; }
.lo-row.is-skeleton :is(.lo-row-title > span, .lo-row-meta) { width: fit-content; border-radius: 6px; background: var(--bg3); color: transparent; }
.lo-row.is-skeleton .sep { color: transparent; }

/* a notice's facts, and its row as published: a label column and a value column, no lines between (Jobs' job page) */
.lo-facts { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 10px 16px; margin: 32px 0 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.lo-facts > div { display: contents; }
.lo-facts dt { color: var(--muted); }
.lo-facts dd { margin: 0; overflow-wrap: anywhere; }
.lo-facts a { text-decoration: none; }
.lo-facts a:hover { color: var(--link); }
@media (max-width: 640px) { .lo-facts { grid-template-columns: 112px minmax(0, 1fr); } }
.lo-col > .lo-facts + .lo-src, .lo-col > section + .lo-src { margin-top: 32px; }
/* the row as the state published it: its column names as they are, so a wider label column */
.lo-raw { margin-top: 0; grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 640px) { .lo-raw { grid-template-columns: 1fr; gap: 2px 0; } .lo-raw dd { margin-bottom: 8px; } }

/* the data sources: a document in the column */
.lo-doc p, .lo-doc li { color: var(--fg); font-size: var(--text-base); line-height: var(--lh-base); text-wrap: pretty; }
.lo-doc p { margin: 12px 0 0; }
.lo-doc ul { margin: 12px 0 0; padding-left: 20px; }
.lo-doc li + li { margin-top: 8px; }
.lo-doc li::marker { color: var(--muted); }
.lo-doc blockquote { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-box); background: var(--bg2); color: var(--fg-hover); font-size: var(--text-sm); line-height: var(--lh-sm); }
.lo-doc a { text-decoration: none; color: var(--link); }
.lo-doc a:hover { text-decoration: underline; }
.lo-doc .lo-table { margin-top: 12px; }
.lo-files td { font-size: var(--text-sm); }
.lo-files td:first-child { white-space: nowrap; }
.lo-files td:nth-child(2) { min-width: 180px; overflow-wrap: anywhere; }
.lo-files td:nth-child(n+5) { white-space: nowrap; }
/* the state table's words read from the left: the source, the format, the status */
.lo-files :is(th, td):nth-child(-n+4) { text-align: left; }
.lo-files :is(th, td):nth-child(n+2):nth-child(-n+4) { padding-left: 16px; }
/* the state table is wider than the column: it may use more of the window */
.lo-doc .lo-table-wrap { margin-inline: calc(-1 * clamp(0px, (100vw - 688px) / 2, 200px)); }

/* ---- a page with one message (not found, an error) ---- */
.lo-message { max-width: 560px; margin: 96px auto 0; text-align: center; }
.lo-message h1 { margin: 0 0 12px; font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: var(--tracking-tight); }
.lo-message p { margin: 0 0 24px; color: var(--muted); }