/* Visual reference: interPost's D:/test/static/style.css, read 2026-10-13.
   Layout is local in style.css. These tokens and component treatments match
   interPost's paper-and-ink design without importing any of its code at runtime. */
:root {
  --ink: #171717;
  --muted: #555;
  --paper: #fffdf6;
  --paper-shadow: #e7e1d2;
  --white: #fff;
  --line: #171717;
  --border: #171717;
  --blue-line: #a9c8e8;
  --green: #0645ad; /* Existing layout token used for links. */
  --pale: #fff3df;
  --gold: #e8ba73;
  --red: #c24444;
  --radius: 0;
  font: 16px/1.45 Georgia, "Times New Roman", serif;
  background: var(--paper-shadow);
  color: var(--ink);
}
html { min-height: 100vh; background: var(--paper-shadow); }
body { min-height: 100vh; min-height: 100dvh; position: relative; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 31px, var(--blue-line) 32px), var(--paper-shadow);
  background-size: 100% 32px;
}
*, *::before, *::after { border-radius: 0; }
.brand-mark, .nav-item, .count, .tag, .unlock-card, .route-map, .callout, .notice, .status-pill, .suggestions button, code, pre { border-radius: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
button, input, select, textarea { font-family: inherit; border: 2px solid var(--border); border-radius: 0; font-size: 16px; }
button { color: var(--ink); background: var(--white); box-shadow: 2px 2px 0 var(--border); font-weight: normal; min-height: 40px; transition: none; }
button:hover { color: var(--ink); background: var(--paper); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--border); }
button:disabled:hover { transform: none; }
button.secondary, button.quiet { color: var(--ink); background: var(--paper); border-color: var(--border); }
button.secondary:hover, button.quiet:hover { background: #f2f2f2; }
button.danger { color: #842323; background: #fff4f4; border-color: var(--border); }
button.text-link { color: var(--green); box-shadow: none; min-height: 28px; font-size: 15px; text-decoration: underline; }
button.text-link:hover { transform: none; background: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
input, select, textarea { background: var(--white); color: var(--ink); }
input::placeholder, textarea::placeholder { color: #777; }
input[type=checkbox] { accent-color: var(--ink); width: 19px; height: 19px; }
label { font-size: 15px; }
code { background: #f2f2f2; }
pre { background: var(--paper); border: 2px solid var(--border); font-size: 14px; }
.brand { font-size: 23px; font-weight: bold; letter-spacing: -.5px; }
.brand-icon { display: block; width: 47px; height: 47px; flex: 0 0 47px; }
.brand small { font-size: 11px; letter-spacing: 0; color: var(--muted); }
.brand-mark { background: var(--gold); color: var(--ink); border: 2px solid var(--border); box-shadow: 2px 2px 0 var(--border); font-size: 23px; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .7px; }
.status-dot { background: var(--gold); border: 1px solid var(--border); border-radius: 50%; width: 7px; height: 7px; }
.status-pill { background: var(--paper); color: var(--ink); border: 2px solid var(--border); border-radius: 0; font-size: 13px; }
.tag { background: var(--paper); color: var(--ink); border: 1px solid var(--border); font-size: 12px; }
.callout, .notice { background: var(--paper); color: var(--ink); border: 2px solid var(--border); border-left: 5px solid var(--gold); font-size: 14px; }
.notice { box-shadow: 2px 2px 0 var(--border); }
.notice.error { background: #fff4f4; color: #842323; border-color: var(--border); border-left-color: var(--red); }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { background: var(--paper); border-right: 2px solid var(--border); padding: 29px 17px 22px; }
.nav-label { margin: 34px 4px 15px; color: var(--muted); font-size: 12px; letter-spacing: .5px; }
.nav-item { border: 2px solid var(--border); background: var(--white); color: var(--ink); font-size: 15px; padding: 10px; margin-bottom: 12px; gap: 9px; }
.nav-item:hover { background: #f2f2f2; }
.nav-item.active { color: var(--ink); background: var(--pale); font-weight: bold; box-shadow: inset 3px 0 0 var(--gold), 2px 2px 0 var(--border); }
.nav-item>span:first-child { width: 18px; }
.count { background: var(--paper); border: 1px solid var(--border); font-size: 11px; padding: 0 4px; min-width: 18px; text-align: center; }
.sidebar-bottom { font-size: 13px; padding-left: 3px; }
.sidebar-bottom p, .sidebar-bottom button { font-size: 13px; }
.sidebar-bottom button { display: block; margin-top: 10px; }
.topbar { background: var(--white); border-bottom: 2px solid var(--border); padding: 0 30px; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.topbar #breadcrumb, .preview-link { font-size: 14px; color: var(--ink); }
.preview-link { color: var(--green); text-decoration: underline; }
.header-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; font-size: 15px; }
.header-links a { text-decoration: underline; }
.header-links .interpost-button { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border: 2px solid var(--border); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--border); text-decoration: none; white-space: nowrap; }
.header-links .interpost-button:hover { background: #f2f2f2; transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--border); }
.topbar { height: auto; min-height: 69px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.public-header { flex-wrap: wrap; gap: 16px; }
.slash { color: var(--muted); }
.workspace main { padding: 30px; }
.page-heading { padding: 24px; border: 2px solid var(--border); background: var(--white); margin-bottom: 23px; }
.page-heading h1 { font-size: 30px; }
.page-heading p:not(.eyebrow) { font-size: 15px; }
.page-heading .eyebrow { font-size: 11px; letter-spacing: .5px; }
.metric-grid { gap: 18px; margin-bottom: 23px; }
.metric { padding: 20px; border: 2px solid var(--border); }
.metric>span { color: var(--ink); font-size: 15px; }
.metric strong { font-size: 33px; font-weight: normal; letter-spacing: 0; }
.metric small { color: var(--muted); font-size: 12px; }
.overview-grid { grid-template-columns: 1.2fr 1fr; }
.panel { padding: 24px; border: 2px solid var(--border); margin-bottom: 23px; }
.panel p { font-size: 15px; line-height: 1.55; }
.panel .small { font-size: 12px; }
.queue-summary strong { font-weight: normal; letter-spacing: 0; }
.queue-summary span { font-size: 13px; }
.button-row { gap: 11px; }
.button-row button { font-size: 14px; }
.accent-panel { background: var(--paper); }
.accent-panel h2 { font-size: 27px; font-weight: bold; letter-spacing: 0; }
.accent-panel .eyebrow { font-size: 11px; letter-spacing: .5px; }
.mini-stat { border-color: var(--border); color: var(--ink); font-size: 13px; }
.mini-stat strong { font-size: 29px; color: var(--ink); }
.mini-stat span:last-child { color: var(--muted); font-size: 12px; }
.row-panel h2 { font-size: 21px; }
.row-panel p, .row-panel>button { font-size: 14px; }
.console-footer { background: var(--paper); border-top: 2px solid var(--border); padding: 16px 30px; color: var(--muted); font-size: 12px; }
.console-footer>span { color: var(--muted); }
.settings-grid .help { font-size: 13px; }
.field-label, .toggle-field label { font-size: 14px; }
.field-label small { font-size: 12px; text-align: right; }
.field input[type=number] { background: var(--white); font-size: 16px; }
.save-bar { padding: 17px; border: 2px solid var(--border); background: var(--paper); }
.save-bar p { font-size: 14px; }
.save-bar button { font-weight: bold; white-space: nowrap; }
.select-label { font-size: 13px; }
.select-label select { font-size: 14px; }
.search-form input { background: var(--white); border-color: var(--border); font-size: 17px; }
.search-form button { font-size: 16px; }
.suggestions { gap: 10px; }
.suggestions button { color: var(--ink); background: var(--paper); border: 2px solid var(--border); font-size: 12px; min-height: 30px; }
.suggestions button:hover { background: #f2f2f2; }
.result-meta { font-size: 14px; color: var(--ink); }
.results { background: var(--white); }
.results:not(:empty) { border: 2px solid var(--border); padding: 0 24px; }
.result { padding: 23px 0; border-bottom-color: #b0b0b0; }
.result:first-child { padding-top: 23px; }
.result:last-child { border-bottom: 0; }
.result-url { color: var(--muted); font-size: 13px; }
.result h3 { font-size: 21px; font-weight: normal; letter-spacing: 0; }
.result h3 a { text-decoration: underline; }
.result p { font-size: 15px; color: var(--ink); line-height: 1.6; }
.result .small { color: var(--muted); font-size: 12px; }
.empty-state { border: 0; padding: 28px 6px; margin: 0; text-align: left; font-size: 15px; }
.pagination button { font-size: 14px; }
.inline-form button { font-size: 14px; min-height: 43px; }
.request-title strong { font-size: 16px; }
.request p { font-size: 14px; }
.backup-row { font-size: 14px; }
.backup-row small { font-size: 12px; }
.route-map { border: 2px solid var(--border); background: var(--paper); font-size: 15px; }
.route-map small { font-size: 13px; }
.unlock-card { max-width: 480px; border: 2px solid var(--border); box-shadow: 3px 3px 0 var(--border); }
.unlock-card p { font-size: 15px; }
.unlock-card .eyebrow { font-size: 12px; }
.unlock-card .small { font-size: 13px; }
.public-header { max-width: none; padding: 19px max(24px, calc((100% - 1080px) / 2)); background: var(--white); border-bottom: 2px solid var(--border); }
.public-header>a:last-child:not(.brand) { font-size: 15px; text-decoration: underline; }
.public-main { max-width: 860px; padding: 0 25px; margin: 22px auto 40px; }
.search-hero { padding: 20px 24px; border: 2px solid var(--border); background: var(--white); }
.search-hero h1 { font-size: 32px; font-weight: bold; letter-spacing: 0; margin: 0 0 14px; }
.search-hero .search-form { margin-top: 0; }
.search-hero>p.small { margin: 12px 0 0; }
.search-hero>p:not(.eyebrow) { font-size: 17px; color: var(--muted); max-width: 610px; line-height: 1.6; }
.search-hero>p.small { font-size: 13px; }
.public-footer { max-width: 1080px; padding: 19px 24px; background: var(--paper); border: 2px solid var(--border); border-bottom: 0; font-size: 13px; color: var(--muted); }
.public-footer a { text-decoration: underline; }
/* Fill short search pages without covering results on longer pages. */
.public-page[data-page="search"] { display: flex; flex-direction: column; }
.public-page[data-page="search"] .public-header { margin: 0; }
.public-page[data-page="search"] .public-main { flex: 1; width: 100%; min-height: 0; }
.public-page[data-page="search"] .public-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; width: calc(100% - 34px); margin: 0 auto; padding: 5px 16px; gap: 12px; }
.public-page[data-page="search"] .public-footer>a { justify-self: end; text-align: right; }
.indexed-count { text-align: left; font-variant-numeric: tabular-nums; }
.about-main { max-width: 860px; margin: 35px auto 50px; padding: 33px; border: 2px solid var(--border); background: var(--white); }
.about-main h1 { font-size: 35px; font-weight: bold; letter-spacing: 0; }
.about-main .lead { font-size: 18px; color: var(--muted); line-height: 1.6; }
.about-main section p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.about-main h2 { font-size: 25px; font-weight: bold; letter-spacing: 0; }
.about-grid h2 { font-size: 22px; }
.about-grid section p { font-size: 15px; }
.owner-section { border-top: 2px solid var(--border); }
.removal-form-panel { background: var(--paper); }
.removal-form-panel h3 { font-size: 22px; font-weight: bold; }
.removal-form-panel p { font-size: 15px !important; }
.removal-form-panel p.small { font-size: 12px !important; }
#removal-message { color: var(--ink); }
#removal-message.error { color: #842323; }
.crawl-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.crawl-overview-grid > .panel { min-width: 0; margin: 0; padding: 18px; }
.overview-page .workspace main { padding: 16px 24px; }
.overview-page .page-heading { padding: 12px 18px; margin-bottom: 12px; }
.overview-page .page-heading h1 { font-size: 27px; }
.overview-page .metric-grid { gap: 16px; margin-bottom: 12px; }
.overview-page .metric { padding: 12px 18px; }
.overview-page .metric strong { margin: 6px 0; font-size: 30px; }
.disk-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.overview-page .disk-metrics .metric { padding: 12px 10px; }
.overview-page .disk-metrics .metric > span { font-size: 13px; }
.overview-page .disk-metrics .metric strong { font-size: 25px; white-space: nowrap; }
.overview-page .disk-metrics .metric small { font-size: 11px; }
@media (max-width: 1100px) {
  .overview-page .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disk-metrics { grid-column: 1 / -1; }
}
.overview-page .topbar { min-height: 58px; padding-top: 7px; padding-bottom: 7px; }
.overview-page .console-footer { padding: 10px 24px; }
.crawl-overview-grid .panel-heading { margin-bottom: 10px; align-items: center; gap: 8px; }
.crawl-overview-grid h2 { font-size: 21px; }
.crawl-queue-panel .queue-summary { margin: 10px 0; }
.crawl-queue-panel .queue-summary strong { font-size: 36px; }
.crawl-queue-panel p { margin: 10px 0; }
.crawl-queue-panel .button-row { margin: 12px 0; flex-wrap: wrap; }
.crawl-queue-panel details { margin-top: 12px; }
.crawl-queue-panel textarea { max-width: 100%; }
.crawl-activity-panel { display: flex; flex-direction: column; height: clamp(300px, calc(100dvh - 365px), 430px); }
.activity-metrics { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12px; }
.activity-metrics strong { font-size: 19px; font-weight: normal; }
.crawl-activity-panel #activity-note { margin: 9px 0; font-size: 12px; }
.activity-urls { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; overflow-anchor: none; }
.activity-url { border-left: 3px solid var(--gold); padding: 7px 8px; margin-bottom: 7px; background: var(--paper); animation: activity-arrive .45s ease-out; }
.activity-url strong { display: block; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.activity-url span { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-empty::before { content: attr(data-empty); display: block; padding: 20px 0; font-size: 13px; color: var(--muted); }
.crawl-activity-panel .activity-footer { margin: 8px 0 0; font-size: 11px; }
.activity-live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: #337242; animation: activity-beat 2s ease-in-out infinite; }
@keyframes activity-arrive { from { opacity: .25; transform: translateY(-5px); background: var(--pale); } to { opacity: 1; transform: translateY(0); } }
@keyframes activity-beat { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .activity-url, .activity-live::before { animation: none; } }
@media (max-width: 900px) {
  .crawl-overview-grid { grid-template-columns: minmax(0, 1fr); }
  .crawl-activity-panel { height: 350px; }
}
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 224px minmax(0,1fr); }
  .sidebar { padding: 26px 13px 20px; }
  .sidebar .brand { font-size: 20px; }
  .nav-item { font-size: 14px; gap: 7px; }
  .workspace main { padding: 25px; }
  .page-heading { padding: 21px; flex-wrap: wrap; gap: 15px; }
  .page-heading .status-pill { margin: 0; }
  .metric { padding: 17px; }
  .metric strong { font-size: 30px; }
  .panel { padding: 21px; }
  .row-panel { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (max-width: 900px) {
  .overview-grid { grid-template-columns: 1fr; gap: 0; }
  .overview-grid .panel { margin-bottom: 23px; }
  .overview-grid { margin-bottom: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .metric-grid { gap: 12px; }
  .metric { padding: 14px; }
  .metric>span { font-size: 13px; }
  .metric strong { font-size: 25px; }
  .metric small { font-size: 11px; }
  .about-main { margin: 28px 23px 45px; }
}
@media (max-width: 640px) {
  .app-shell { display: block; }
  .sidebar { border-right: 0; border-bottom: 2px solid var(--border); background: var(--white); padding: 20px 17px 13px; }
  .sidebar .brand { font-size: 23px; margin-bottom: 23px; }
  .sidebar nav { gap: 11px; padding-bottom: 5px; }
  .nav-item { width: auto; padding: 9px; gap: 6px; font-size: 13px; margin: 0; }
  .topbar { padding: 0 19px; font-size: 11px; }
  .topbar { padding-top: 12px; padding-bottom: 12px; }
  .header-links { gap: 12px; font-size: 13px; }
  .topbar #breadcrumb, .preview-link { font-size: 12px; }
  .workspace main { padding: 21px 17px; }
  .page-heading { padding: 19px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 27px; }
  .page-heading .eyebrow { font-size: 10px; }
  .page-heading p:not(.eyebrow) { font-size: 14px; }
  .status-pill { font-size: 12px; }
  .metric-grid { gap: 9px; margin-bottom: 18px; }
  .metric { padding: 12px 8px; }
  .metric>span { font-size: 12px; min-height: 35px; }
  .metric strong { font-size: 22px; margin: 10px 0 8px; overflow-wrap: anywhere; }
  .metric small { display: block; font-size: 10px; }
  .panel { padding: 19px; margin-bottom: 18px; }
  .panel p { font-size: 14px; }
  .console-footer { padding: 14px 18px; font-size: 11px; }
  .search-form input { padding: 11px 8px; font-size: 16px; }
  .search-form button { padding: 10px 13px; font-size: 15px; }
  .save-bar { padding: 13px; }
  .save-bar p { font-size: 12px; }
  .save-bar button { font-size: 14px; }
  .backup-row { font-size: 13px; }
  .route-map { font-size: 14px; }
  .public-header { padding: 19px; gap: 15px; }
  .public-header .brand { font-size: 20px; gap: 8px; }
  .public-header>a:last-child:not(.brand) { font-size: 12px; }
  .public-main { padding: 0 17px; margin: 17px auto 30px; }
  .search-hero { padding: 17px; }
  .search-hero h1 { font-size: 28px; }
  .search-hero .eyebrow { font-size: 10px; }
  .search-hero>p:not(.eyebrow) { font-size: 16px; }
  .search-hero>p.small { font-size: 12px; }
  .public-footer { padding: 17px; font-size: 11px; margin: 0 17px; }
  .public-page[data-page="search"] .public-footer { padding: 5px 12px; }
  .about-main { padding: 24px 21px; margin: 23px 17px 35px; }
  .about-main h1 { font-size: 29px; }
  .about-main .lead { font-size: 17px; }
  .removal-form-panel { padding: 18px; }
  .results:not(:empty) { padding: 0 18px; }
  .result h3 { font-size: 20px; }
  .result p { font-size: 14px; }
  .result-url { font-size: 12px; }
}
.crawl-preview { margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--border); background: var(--paper, #fffdf6); }
.crawl-preview-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
#crawl-current-url { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#crawl-current-count { display: block; font-size: 11px; color: var(--muted); }
#crawl-current-count:empty { display: none; }
