/* ==========================================================================
   Pro Feed (design_handoff_pro_feed): query bar, saved Views, Display,
   article and post cards. The handoff's inline styles are the spec, mapped
   onto Terminal Light tokens so dark mode follows the main handoff.
   Pico styles buttons and inputs, so the controls here reset what they use.
   ========================================================================== */

.pf { padding: 18px 28px 56px; }
.pf-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-side { position: sticky; top: calc(var(--tl-topbar-h) + 18px); display: flex; flex-direction: column; gap: 14px; }
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pf [hidden] { display: none !important; }

.pf button { margin: 0; font: inherit; color: inherit; cursor: pointer; }
.pf-view, .pf-setting, .pf-opt, .pf-sug-row { text-align: left !important; justify-content: flex-start !important; }
.pf button:focus-visible, .pf [tabindex]:focus-visible { outline: none; box-shadow: var(--tl-focus-ring); }
.pf-mono-label { font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--tl-ink-45); }

/* ---- left column ------------------------------------------------------------ */
.pf-card { padding: 6px 0 8px; }
.pf-card-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; }
.pf-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--tl-ink); }

.pf-view {
  display: flex !important; align-items: center; gap: 10px; width: calc(100% - 12px) !important; height: 40px; margin: 0 6px !important; padding: 0 10px !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important;
  text-align: left; transition: background 120ms;
}
.pf-view:hover { background: var(--tl-fill-04) !important; }
.pf-view.is-on { background: var(--tl-fill-06) !important; }
.pf-view-av { display: flex; flex: none; width: 34px; }
.pf-view-av img { width: 18px; height: 18px; margin-right: -6px; object-fit: contain; border-radius: 50%; background: var(--tl-control); box-shadow: 0 0 0 1.5px var(--tl-card); }
.pf-glyph { width: 18px; height: 18px; border-radius: 5px; background: var(--tl-fill-06); display: inline-flex; align-items: center; justify-content: center; font-family: var(--tl-mono); font-size: 9px; font-weight: 700; color: var(--tl-ink-55); }
.pf-view-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tl-ink); }
.pf-view.is-on .pf-view-name { font-weight: 650; }
.pf-view-edit { width: 22px; height: 22px; flex: none; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--tl-ink-45); }
.pf-view-edit:hover { background: var(--tl-fill-07); color: var(--tl-ink); }
.pf-view-count { font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600; color: var(--tl-ink-40); }
.pf-view.is-on .pf-view-count { color: var(--tl-ink); }

.pf-save-wrap { padding: 8px 12px 2px; }
.pf-save {
  width: 100% !important; height: 32px; display: flex !important; align-items: center; justify-content: center; gap: 6px; padding: 0 !important;
  border: 1px dashed var(--tl-line-18) !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important;
  font-size: 12.5px !important; font-weight: 600; color: var(--tl-ink-55) !important; transition: all 150ms;
}
.pf-save:hover:not(.is-saved) { border-color: var(--tl-line-20) !important; color: var(--tl-ink) !important; }
.pf-save.is-saved { cursor: default; }

.pf-editor {
  display: flex; flex-direction: column; gap: 8px; margin: 2px 6px; padding: 10px; border-radius: 8px;
  background: var(--tl-control); box-shadow: inset 0 0 0 1px var(--tl-line-14), 0 4px 12px -6px rgba(16, 20, 24, 0.18);
}
.pf-editor-input {
  height: 32px !important; margin: 0 !important; padding: 0 10px !important; border-radius: 7px !important;
  border: 1px solid var(--tl-line-18) !important; background: var(--tl-card) !important; box-shadow: none !important;
  font-family: var(--tl-font); font-size: 13.5px !important; font-weight: 600; color: var(--tl-ink) !important; outline: none;
}
.pf-editor-input:focus { box-shadow: var(--tl-focus-ring) !important; }
.pf-editor-row { display: flex; gap: 6px; }
.pf-btn-ink, .pf-btn-light {
  height: 30px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 12px !important; width: auto !important;
  border-radius: 7px !important; font-size: 12.5px !important; font-weight: 650; box-shadow: none !important; white-space: nowrap;
}
.pf-btn-ink { flex: 1; border: 0 !important; background: var(--tl-ink) !important; color: var(--tl-on-ink) !important; }
.pf-btn-ink:hover { background: var(--tl-ink-hover) !important; }
.pf-btn-light { border: 1px solid var(--tl-line-12) !important; background: var(--tl-control) !important; color: var(--tl-ink) !important; font-weight: 600; }
.pf-btn-light:hover { border-color: var(--tl-line-20) !important; }
.pf-editor-del { align-self: flex-start; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 12px !important; font-weight: 600; color: var(--tl-down) !important; }
.pf-editor-err { margin: 0; font-size: 12px; color: var(--tl-down); }

.pf-setting {
  display: flex !important; align-items: center; gap: 10px; width: calc(100% - 12px) !important; min-height: 44px; margin: 0 6px !important; padding: 6px 10px !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; text-align: left;
}
.pf-setting:hover { background: var(--tl-fill-04) !important; }
.pf-setting-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-setting-label { font-size: 13.5px; font-weight: 550; color: var(--tl-ink); }
.pf-setting-sub { font-size: 11.5px; color: var(--tl-ink-50); }
.pf-switch { flex: none; position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--tl-line-15); transition: background 180ms; }
.pf-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16, 20, 24, 0.25); transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
}
.pf-setting[aria-checked="true"] .pf-switch { background: var(--tl-ink); }
.pf-setting[aria-checked="true"] .pf-switch::after { transform: translateX(12px); }

.pf-quick { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pf-quick-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-tile {
  width: 36px !important; height: 36px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 9px !important; border: 1px solid var(--tl-line-08) !important; background: var(--tl-control) !important; box-shadow: none !important; transition: all 150ms;
}
.pf-tile:hover { border-color: var(--tl-line-20) !important; transform: translateY(-1px); }
.pf-tile.is-on { border-color: var(--tl-ink) !important; }
.pf-tile img { width: 22px; height: 22px; object-fit: contain; }

.pf-explain { padding: 2px 16px; display: flex; flex-direction: column; gap: 7px; }
.pf-explain-text { font-size: 12px; line-height: 1.5; color: var(--tl-ink-55); text-wrap: pretty; }
.pf-tok { font-family: var(--tl-mono); font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; background: var(--tl-fill-06); color: var(--tl-ink); }
.pf-tok.is-and { background: var(--tl-ink); color: var(--tl-on-ink); }

/* ---- query bar ---------------------------------------------------------------- */
.pf-bar { position: relative; z-index: 5; overflow: visible !important; }
.pf-a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px 10px 16px; cursor: text; }
.pf-a-icon { flex: none; color: var(--tl-ink-50); }
.pf-tokens { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 5px; border-radius: 8px;
  border: 1px solid var(--tl-line-12); background: var(--tl-control); box-shadow: 0 1px 2px rgba(16, 20, 24, 0.05); white-space: nowrap;
}
.pf-av { width: 20px; height: 20px; flex: none; object-fit: contain; border-radius: 0; background: transparent; }
.pf-av.is-round { object-fit: cover; border-radius: 50%; background: var(--tl-fill-04); }
.pf-kw-tile { width: 20px; height: 20px; border-radius: 5px; background: var(--tl-fill-06); display: inline-flex; align-items: center; justify-content: center; font-family: var(--tl-mono); font-size: 11px; font-weight: 700; color: var(--tl-ink-55); }
.pf-chip-name { font-size: 13px; font-weight: 650; color: var(--tl-ink); }
.pf-chip-kind { font-family: var(--tl-mono); font-size: 9px; letter-spacing: 0.9px; color: var(--tl-ink-40); }
.pf-chip-x {
  width: 18px !important; height: 18px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 5px !important; background: transparent !important; box-shadow: none !important; color: var(--tl-ink-45) !important;
}
.pf-chip-x:hover { background: var(--tl-fill-07) !important; color: var(--tl-ink) !important; }
.pf-conn {
  padding: 3px 6px !important; width: auto !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
  font-family: var(--tl-mono) !important; font-size: 10px !important; font-weight: 700; letter-spacing: 0.8px; line-height: 1.2;
  background: var(--tl-fill-06) !important; color: var(--tl-ink) !important; transition: transform 150ms, background 150ms;
}
.pf-conn:hover { transform: scale(1.06); }
.pf-conn[aria-pressed="true"] { background: var(--tl-ink) !important; color: var(--tl-on-ink) !important; }
.pf-input {
  flex: 1; min-width: 180px !important; width: auto !important; height: 30px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important;
  font-family: var(--tl-font); font-size: 14.5px !important; color: var(--tl-ink) !important;
}
.pf-input::placeholder { color: var(--tl-ink-45); }
.pf-input:focus, .pf-input:focus-visible { box-shadow: none !important; outline: none !important; }
.pf-match { flex: none; display: flex; align-items: center; gap: 8px; }
.pf-seg { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--tl-fill-05); }
.pf-seg-btn {
  padding: 4px 10px !important; width: auto !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 600; white-space: nowrap; color: var(--tl-ink-50) !important; transition: all 150ms;
}
.pf-seg-btn[aria-pressed="true"] { background: var(--tl-control) !important; color: var(--tl-ink) !important; box-shadow: 0 1px 2px rgba(16, 20, 24, 0.12), 0 0 0 1px rgba(16, 20, 24, 0.05) !important; }
.pf-kbd { flex: none; font-family: var(--tl-mono); font-size: 10.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--tl-line-14); color: var(--tl-ink-45); }

.pf-pop {
  position: absolute; z-index: 40; padding: 6px; border-radius: 10px; border: 1px solid var(--tl-line-10);
  background: var(--tl-control); box-shadow: 0 18px 40px -16px rgba(16, 20, 24, 0.3); cursor: default;
}
.pf-sug { left: 12px; top: calc(100% + 4px); width: 440px; max-width: calc(100% - 24px); max-height: 420px; overflow-y: auto; }
.pf-sug-head { padding: 8px 10px 4px; font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--tl-ink-45); }
.pf-sug-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.pf-sug-row:hover, .pf-sug-row.is-hi { background: var(--tl-fill-05); }
.pf-sug-row .pf-av { width: 22px; height: 22px; }
.pf-sug-row .pf-kw-tile { width: 22px; height: 22px; border-radius: 6px; }
.pf-sug-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tl-ink); }
.pf-sug-sub { font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--tl-ink-45); white-space: nowrap; }
.pf-sug-foot { display: flex; gap: 14px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--tl-line-06); font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.8px; color: var(--tl-ink-40); }
.pf-sug-empty { padding: 10px; font-size: 13px; color: var(--tl-ink-50); }

.pf-b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-top: 1px solid var(--tl-line-06); }
.pf-b > .pf-mono-label { margin-right: 4px; }
.pf-pill-wrap { position: relative; }
.pf-pill {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 10px !important; width: auto !important;
  border-radius: 7px !important; border: 1px solid var(--tl-line-10) !important; background: var(--tl-control) !important; box-shadow: none !important;
  font-size: 12.5px !important; font-weight: 550; white-space: nowrap; color: var(--tl-ink) !important; transition: border-color 150ms;
}
.pf-pill:hover { border-color: var(--tl-line-20) !important; }
.pf-pill.is-active { border-color: var(--tl-ink) !important; color: var(--tl-ink-60) !important; }
.pf-pill-val { font-weight: 650; color: var(--tl-ink); }
.pf-pill svg { flex: none; }
.pf-menu { left: 0; top: 36px; width: 244px; }
.pf-opt {
  display: flex !important; align-items: center; gap: 10px; width: 100% !important; height: 34px; padding: 0 10px !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important; text-align: left;
}
.pf-opt:hover { background: var(--tl-fill-05) !important; }
.pf-box { flex: none; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--tl-line-20); background: var(--tl-control); display: inline-flex; align-items: center; justify-content: center; transition: all 120ms; }
.pf-box.is-radio { border-radius: 50%; }
.pf-box svg { opacity: 0; }
.pf-opt[aria-checked="true"] .pf-box { background: var(--tl-ink); border-color: var(--tl-ink); }
.pf-opt[aria-checked="true"] .pf-box svg { opacity: 1; }
.pf-opt-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--tl-ink); }
.pf-opt[aria-checked="true"] .pf-opt-label { font-weight: 650; }
.pf-opt-n { font-family: var(--tl-mono); font-size: 10px; color: var(--tl-ink-40); }
.pf-menu-note { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--tl-line-06); font-size: 11.5px; line-height: 1.45; color: var(--tl-ink-50); }
.pf-dates { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 2px; }
.pf-dates label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; color: var(--tl-ink-60); }
.pf-dates input {
  width: 140px !important; height: 28px !important; margin: 0 !important; padding: 0 6px !important; border-radius: 6px !important;
  border: 1px solid var(--tl-line-14) !important; background: var(--tl-card) !important; box-shadow: none !important; font-size: 12px !important; color: var(--tl-ink) !important;
}
.pf-clear { margin-left: auto !important; padding: 0 4px !important; width: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600; color: var(--tl-ink-50) !important; }
.pf-clear:hover { color: var(--tl-ink) !important; }

.pf-c { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 16px; border-top: 1px solid var(--tl-line-06); background: var(--tl-fill-025); border-radius: 0 0 var(--tl-r-card) var(--tl-r-card); }
.pf-read { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; text-wrap: pretty; color: var(--tl-ink-60); }
.pf-read b { font-weight: 650; color: var(--tl-ink); }
.pf-count { flex: none; font-family: var(--tl-mono); font-size: 10px; letter-spacing: 1px; color: var(--tl-ink-45); white-space: nowrap; }
.pf-div { flex: none; width: 1px; height: 18px; background: var(--tl-line-10); }
.pf-c-actions { flex: none; display: flex; gap: 6px; }
.pf-act {
  height: 30px; padding: 0 11px !important; width: auto !important; display: inline-flex !important; align-items: center; gap: 6px;
  border-radius: 7px !important; border: 1px solid var(--tl-line-12) !important; background: var(--tl-control) !important; box-shadow: none !important;
  font-size: 12.5px !important; font-weight: 600; white-space: nowrap; color: var(--tl-ink) !important; transition: border-color 150ms;
}
.pf-act:hover { border-color: var(--tl-line-20) !important; }

/* ---- empty, new items, feed ------------------------------------------------------- */
.pf-empty { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pf-empty-title { font-size: 16px; font-weight: 700; color: var(--tl-ink); }
.pf-empty-hint { max-width: 420px; font-size: 13px; line-height: 1.5; color: var(--tl-ink-60); }
.pf-empty-row { display: flex; gap: 8px; margin-top: 8px; }
.pf-empty-row .pf-btn-ink { flex: none; height: 32px; padding: 0 13px !important; border-radius: 8px !important; }
.pf-empty-row .pf-btn-light { height: 32px; padding: 0 13px !important; border-radius: 8px !important; font-weight: 650; }

.pf-newpill {
  position: sticky; z-index: 6; top: calc(var(--tl-topbar-h) + 10px); align-self: center; margin: -4px 0 -10px !important;
  height: 32px; padding: 0 14px !important; width: auto !important; border: 0 !important; border-radius: 999px !important;
  background: var(--tl-ink) !important; color: var(--tl-on-ink) !important; box-shadow: var(--tl-float-shadow) !important; font-size: 12.5px !important; font-weight: 650;
}

.pf-cols { columns: 3 280px; column-gap: 14px; }
.pf-card-item {
  break-inside: avoid; display: flex; flex-direction: column; margin-bottom: 14px; overflow: hidden; cursor: pointer;
  border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07); background: var(--tl-card);
  box-shadow: var(--tl-card-shadow); color: var(--tl-ink); text-decoration: none;
  transition: transform 200ms cubic-bezier(.2, .7, .2, 1), box-shadow 200ms, border-color 200ms;
}
.pf-card-item:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 26px -14px rgba(16, 20, 24, 0.22); border-color: var(--tl-line-10); color: var(--tl-ink); }
.pf-card-item.is-new { animation: pf-in 420ms cubic-bezier(.2, .7, .2, 1); }
@keyframes pf-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.pf-media { position: relative; background: var(--tl-fill-06); }
.pf-media img { width: 100%; height: auto; max-height: 220px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pf-dur { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 7px; border-radius: 6px; background: rgba(16, 20, 24, 0.78); color: #fff; font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600; }
.pf-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(16, 20, 24, 0.62); display: flex; align-items: center; justify-content: center; }
.pf-body { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px 14px; }
.pf-meta { display: flex; align-items: center; gap: 7px; }
.pf-src { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--tl-ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-date { font-family: var(--tl-mono); font-size: 10.5px; color: var(--tl-ink-45); white-space: nowrap; }
.pf-title { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.25px; text-wrap: pretty; color: var(--tl-ink); }

.pf-post { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; }
.pf-post-head { display: flex; align-items: center; gap: 10px; }
.pf-post-av { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tl-line-08); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pf-post-av img { width: 26px; height: 26px; object-fit: contain; }
.pf-post-av img.is-photo { width: 100%; height: 100%; object-fit: cover; }
.pf-post-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-post-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tl-ink); }
.pf-post-handle { font-size: 13px; color: var(--tl-ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-post-glyph { flex: none; align-self: flex-start; margin-top: 3px; color: var(--tl-ink-35); }
.pf-post-text { font-size: 14.5px; line-height: 1.5; text-wrap: pretty; color: var(--tl-ink); overflow-wrap: anywhere; }
.pf-post-img { width: 100%; max-height: 260px; object-fit: cover; display: block; border-radius: 10px; border: 1px solid var(--tl-line-06); }

.pf-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--tl-line-05); }
.pf-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 4px; border-radius: 6px;
  background: var(--tl-fill-035); font-size: 11.5px; font-weight: 500; color: var(--tl-ink-65); white-space: nowrap;
}
.pf-tag img { width: 15px; height: 15px; object-fit: contain; }
.pf-tag img.is-round { border-radius: 50%; object-fit: cover; }
.pf-tag.is-on { background: var(--tl-control); box-shadow: inset 0 0 0 1px var(--tl-ink); font-weight: 650; color: var(--tl-ink); }
.pf-tag.is-topic { padding: 0 7px 0 6px; background: var(--tl-fill-05); font-family: var(--tl-mono); font-size: 10.5px; color: var(--tl-ink-70); }
.pf-tag.is-topic.is-on { background: var(--tl-control); box-shadow: inset 0 0 0 1px var(--tl-ink); font-weight: 650; color: var(--tl-ink); }
.pf-hash { font-size: 11px; color: var(--tl-ink-40); }
.pf-cols.no-tags .pf-tags { display: none; }

.pf-skel { break-inside: avoid; margin-bottom: 14px; border-radius: var(--tl-r-card); border: 1px solid var(--tl-line-07); background: var(--tl-card); overflow: hidden; }
.pf-skel i { display: block; background: var(--tl-fill-05) linear-gradient(90deg, transparent, var(--tl-fill-04), transparent) no-repeat; background-size: 240px 100%; animation: tl-shimmer 1.2s linear infinite; }
.pf-skel .is-img { height: 150px; }
.pf-skel .is-line { height: 12px; margin: 12px 14px 0; border-radius: 4px; }
.pf-skel .is-line.is-short { width: 55%; margin-bottom: 16px; }

.pf-more { display: flex; justify-content: center; }
.pf-more .pf-act { height: 34px; padding: 0 16px !important; }
.pf-more-note { font-family: var(--tl-mono); font-size: 10px; letter-spacing: 1px; color: var(--tl-ink-40); }

/* ---- under 1100px: Views as a strip above the bar, Display in a popover ---- */
.pf-strip { display: none; }
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-side { display: none; }
  .pf-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; position: relative; }
  .pf-strip::-webkit-scrollbar { display: none; }
  .pf-strip .pf-view { width: auto !important; flex: none; margin: 0 !important; height: 34px; border: 1px solid var(--tl-line-10) !important; background: var(--tl-control) !important; }
  .pf-strip .pf-view.is-on { border-color: var(--tl-ink) !important; }
  .pf-strip .pf-view-av { width: auto; padding-right: 6px; }
  .pf-strip .pf-strip-display { margin-left: auto !important; flex: none; }
  .pf-display-pop { position: fixed; right: 16px; top: calc(var(--tl-topbar-h) + 60px); width: 280px; z-index: 60; }
  .pf-sug { width: auto; right: 12px; }
}
@media (max-width: 720px) {
  .pf { padding: 14px 16px 40px; }
  .pf-a { flex-wrap: wrap; }
  .pf-kbd { display: none; }
  .pf-c { flex-wrap: wrap; }
  .pf-read { flex-basis: 100%; }
  .pf-input { min-width: 140px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-card-item, .pf-switch::after, .pf-conn { transition: none; }
  .pf-card-item.is-new { animation: none; }
  .pf-skel i { animation: none; }
}