/* ==================================================================
   YOUR FILES — grid, reader, upload and brand strip (COM-650)

   Ported from the round 3 canvas prototype. Every file is the same object:
   a small page that lifts off the desk at the top and sinks into it at the
   bottom. The page itself is white paper; warmth comes from the objects on
   the desk (the sticky note, the brand strip), never from tinting the paper.
   ================================================================== */

:root {
  --yf-sticky: #fff7d6;
  --yf-sticky-ink: #3d3628;
  --yf-sticky-label: #946b20;
  --yf-sticky-field: #fffbe8;
  --yf-new-ink: #2f6b45;
  --yf-new-bg: #dcefe2;
  --yf-danger: #b23a4f;
  --yf-doc-border: rgba(175, 170, 162, 0.28);
  --yf-doc-shadow: 0 -1px 4px rgba(60, 50, 40, 0.05);
  --yf-doc-shadow-lift: 0 -2px 6px rgba(60, 50, 40, 0.08);
  --yf-pop-shadow: 2px 10px 28px rgba(60, 50, 40, 0.14);
  --yf-scrim: rgba(48, 46, 43, 0.28);
}

.yf-page { padding: 0 4px 48px; }

/* ---- Brand strip ---- */

.yf-strip {
  display: flex; align-items: center; gap: 28px;
  background: var(--input-bg);
  border: 1px solid var(--bubble-border);
  border-radius: var(--radius);
  box-shadow: var(--bubble-shadow);
  padding: 14px 18px 14px 14px;
  margin-bottom: 36px;
}
.yf-strip button {
  font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.yf-strip .yf-strip-logo {
  flex: none; width: 96px; height: 58px; border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(60, 50, 40, 0.12);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  transition: transform .25s var(--spring), box-shadow .25s;
}
.yf-strip-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.yf-strip-logo-add { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--accent); }
.yf-strip .yf-strip-logo:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(60, 50, 40, 0.14); }
.yf-strip-id { flex: 1; min-width: 0; }
.yf-strip-name {
  font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-strip-tagline {
  font-size: 13.5px; color: var(--text-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-strip-part {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none;
  transition: transform .25s var(--spring);
}
.yf-strip-part:hover { transform: translateY(-2px); }
.yf-strip-label { font-size: 11px; color: var(--text-muted); }
.yf-strip-part.is-empty .yf-strip-label { font-weight: 600; color: var(--accent); }
.yf-strip-dots { display: flex; height: 32px; align-items: center; }
.yf-strip-dots i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--input-bg);
  box-shadow: 0 0 0 1px var(--border);
}
.yf-strip-dots i + i { margin-left: -9px; }
.yf-strip-aa { height: 32px; display: flex; align-items: center; font-size: 28px; font-weight: 600; line-height: 1; }
.yf-strip-fan { display: flex; height: 32px; align-items: center; }
.yf-strip-fan img {
  width: 30px; height: 30px; object-fit: cover; border-radius: 7px;
  background: var(--surface); border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(60, 50, 40, 0.14);
}
.yf-strip-fan img:nth-child(1) { transform: rotate(-6deg); }
.yf-strip-fan img:nth-child(2) { transform: rotate(3deg); margin-left: -12px; }
.yf-strip-fan img:nth-child(3) { transform: rotate(8deg); margin-left: -12px; }
.yf-strip-face { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 1px 3px rgba(60, 50, 40, 0.14); }
.yf-strip-slot {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px dashed rgba(139, 111, 71, 0.45);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.yf-strip-slot.is-round { border-radius: 50%; }
.yf-strip-slot svg { width: 13px; height: 13px; }
.yf-strip-rule { width: 1px; align-self: stretch; background: var(--border); flex: none; }
.yf-strip .yf-strip-edit {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--border); background: var(--surface); padding: 8px 14px; border-radius: 9px;
  transition: transform .2s var(--spring), box-shadow .2s;
}
.yf-strip .yf-strip-edit:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(60, 50, 40, 0.1); }

/* ---- Sections ---- */

.yf-section {
  border-top: 1px solid rgba(175, 170, 162, 0.28);
  padding-top: 18px;
  margin-bottom: 40px;
}
.yf-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.yf-section-name { font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 0; }
.yf-section-count {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--surface2); padding: 1px 8px; border-radius: 10px;
}
.yf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; }

/* ---- The doc card ---- */

.yf-card {
  display: flex; flex-direction: column; min-width: 0;
  font-family: inherit; text-align: left; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
/* The wrapper holds the fade. A mask on the doc itself would also clip the
   doc's own shadow, so the shadow lives inside the wrapper's padding and the
   whole thing dissolves into the desk at the bottom. */
.yf-doc-wrap {
  display: block; height: 138px; margin: -6px -6px 4px; padding: 6px 6px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 50%, transparent 96%);
}
.yf-doc {
  display: block; position: relative; height: 100%; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--yf-doc-border); border-bottom: 0;
  border-radius: 3px 3px 0 0;
  padding: 20px 14px 0;
  box-shadow: var(--yf-doc-shadow);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.yf-card:hover .yf-doc,
.yf-card:focus-visible .yf-doc { transform: translateY(-3px); box-shadow: var(--yf-doc-shadow-lift); }
.yf-card:active .yf-doc { transform: translateY(-1px); }
.yf-card:focus-visible { outline: none; }
.yf-card:focus-visible .yf-doc { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The page is laid out at twice the size and scaled down, so the words keep
   real proportions instead of turning into a smudge of 6px text. */
.yf-doc-page { display: block; width: 200%; transform: scale(0.5); transform-origin: 0 0; }
.yf-b { display: block; overflow-wrap: anywhere; }
.yf-b-h1 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--text); margin-bottom: 10px; }
.yf-b-h2 { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); margin: 12px 0 6px; }
.yf-b-p { font-size: 12.5px; line-height: 1.5; color: #6b665f; margin-bottom: 8px; }
.yf-b-li { font-size: 12.5px; line-height: 1.5; color: #6b665f; margin-bottom: 5px; padding-left: 12px; border-left: 2px solid #ece7df; }

.yf-card-name {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-card-what {
  display: block; font-size: 12px; color: var(--text-muted); line-height: 1.35; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--accent); }
.yf-card-pin { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); }
.yf-card-new { color: var(--yf-new-ink); background: var(--yf-new-bg); padding: 1px 7px; border-radius: 10px; }

.yf-add { display: flex; flex-direction: column; font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.yf-add-box {
  height: 132px; width: 100%;
  border: 1.5px dashed rgba(139, 111, 71, 0.3); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; text-align: center; font-size: 12px; color: var(--text-muted);
  transition: border-color .2s, transform .25s var(--spring);
}
.yf-add-box svg { color: #a8977c; }
.yf-add:hover .yf-add-box { border-color: rgba(139, 111, 71, 0.55); transform: translateY(-2px); }

.yf-empty { padding: 48px 0 24px; text-align: center; color: var(--text-muted); }
.yf-empty p:first-child { font-family: var(--serif); font-size: 20px; color: var(--text); margin-bottom: 6px; }

/* The wait. The real strip, section and card boxes at their real sizes, with
   faint ink where the words will land, breathing slowly so it reads as
   working. When the files arrive only the ink changes; nothing moves. */
.yf-skel-card, .yf-skel-strip { pointer-events: none; }
.yf-ink {
  display: block; height: 10px; border-radius: 5px;
  background: rgba(60, 50, 40, 0.07);
  animation: yf-breathe 1.6s ease-in-out infinite;
}
@keyframes yf-breathe { 50% { opacity: 0.45; } }
.yf-doc .yf-ink { height: 6px; margin-bottom: 7px; background: rgba(60, 50, 40, 0.06); }
.yf-doc .yf-ink.is-h { height: 10px; width: 62%; margin-bottom: 10px; background: rgba(60, 50, 40, 0.1); }
.yf-doc .yf-ink.is-short { width: 48%; }
.yf-doc .yf-ink.is-mid { width: 74%; }
/* Heights match .yf-card-name, -what and -meta line boxes. */
.yf-skel-card .yf-ink.is-name { width: 70%; height: 11px; margin: 3px 0 3.5px; }
.yf-skel-card .yf-ink.is-what { width: 88%; height: 9px; margin: 5px 0 3.5px; }
.yf-skel-card .yf-ink.is-meta { width: 34%; height: 8px; margin-top: 9px; margin-bottom: 2px; }
.yf-ink.is-section { width: 132px; height: 14px; margin: 4px 0; }
.yf-skel-strip .yf-ink.is-brand { width: 120px; height: 18px; border-radius: 6px; }
.yf-skel-strip .yf-ink.is-tagline { width: 150px; height: 10px; margin-top: 9px; }
.yf-skel-strip .yf-ink.is-dot { width: 32px; height: 32px; border-radius: 50%; }
.yf-skel-strip .yf-ink.is-label { width: 40px; height: 8px; margin-top: 3px; }
.yf-skel-strip .yf-ink.is-edit { width: 62px; height: 34px; border-radius: 9px; flex: none; }
.yf-skel-strip .yf-strip-logo { animation: yf-breathe 1.6s ease-in-out infinite; }

/* The rest of the file on its way: faint lines under the opening lines. */
.yf-paper-more { padding-top: 6px; }
.yf-paper-more .yf-ink { height: 9px; margin-bottom: 14px; }
.yf-paper-more .yf-ink.is-short { width: 46%; }
.yf-paper-more .yf-ink.is-mid { width: 72%; }

/* ---- Reader ---- */

.yf-reader {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; gap: 28px;
  align-items: start; padding: 8px 24px 48px;
}
.yf-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 11px; cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s, background .15s;
}
.yf-tool:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(60, 50, 40, 0.1); }
.yf-tool:active { transform: translateY(0); box-shadow: none; }
.yf-tool:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.yf-tool.is-icon { padding: 7px 9px; }
.yf-tool.is-on { color: var(--yf-new-ink); background: #e8f3eb; border-color: rgba(47, 107, 69, 0.25); }
.yf-tool.is-danger { color: var(--yf-danger); }

.yf-rail { position: sticky; top: 76px; }
.yf-rail .yf-tool { margin-bottom: 18px; }
.yf-rail-title { font-family: var(--serif); font-size: 17px; font-weight: 500; margin: 0 0 8px 12px; }
.yf-rail-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  font-family: inherit; color: inherit; background: none; border: 1px solid transparent;
  border-radius: 8px; padding: 9px 12px; margin-bottom: 2px; cursor: pointer;
}
.yf-rail-item:hover { background: rgba(255, 255, 255, 0.6); }
.yf-rail-item.is-active { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 3px rgba(60, 50, 40, 0.08); }
.yf-rail-name { font-size: 13.5px; font-weight: 600; }
.yf-rail-what { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.yf-read-title {
  font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 14px;
  min-height: 40px; display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yf-rename { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; min-height: 40px; }
.yf-rename input {
  flex: 1; min-width: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--text);
  border: 1px solid rgba(139, 111, 71, 0.45); border-radius: 8px; padding: 4px 10px; outline: none; background: var(--input-bg);
}
.yf-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.yf-more { position: relative; margin-left: auto; }
.yf-menu {
  position: absolute; right: 0; top: 40px; z-index: 30; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--yf-pop-shadow); padding: 6px; display: flex; flex-direction: column;
}
.yf-menu[hidden] { display: none; }
.yf-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
  background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer;
}
.yf-menu-item:hover, .yf-menu-item:focus-visible { background: var(--surface2); outline: none; }
.yf-menu-item.is-danger { color: var(--yf-danger); }
.yf-menu-label { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 8px 12px 4px; }
.yf-menu-sep { height: 1px; background: var(--border-light); margin: 4px 6px; }

.yf-paper {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(60, 50, 40, 0.06), 2px 14px 34px rgba(60, 50, 40, 0.08);
  padding: 40px 52px 48px; min-height: 480px;
}
.yf-paper-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 18px; }
.yf-paper-meta svg { flex: none; }
.yf-paper-body.output-rendered { padding: 0; max-width: none; }
.yf-paper-error { font-size: 14px; color: var(--text-muted); }

.yf-sticky-col { padding-top: 110px; position: sticky; top: 76px; }
.yf-sticky {
  background: var(--yf-sticky); border-radius: 3px; padding: 16px 16px 14px;
  box-shadow: 0 2px 6px rgba(60, 50, 40, 0.1); transform: rotate(1.4deg);
}
.yf-sticky-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yf-sticky-label); margin-bottom: 8px; }
.yf-sticky-text { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--yf-sticky-ink); margin: 0; overflow-wrap: break-word; }
.yf-sticky-text.is-empty { opacity: .7; }
.yf-sticky textarea {
  width: 100%; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--yf-sticky-ink);
  background: var(--yf-sticky-field); border: 1px solid rgba(148, 107, 32, 0.35); border-radius: 4px;
  padding: 8px; resize: vertical; outline: none;
}
.yf-sticky-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.yf-link {
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; margin-top: 12px;
}
.yf-sticky-actions .yf-link { margin-top: 0; }
.yf-btn-primary {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #fff5e6;
  background: linear-gradient(to bottom, #9a7d54, #8b6f47); border: 0; border-radius: 9px;
  padding: 7px 14px; cursor: pointer;
  transition: transform .2s var(--spring), filter .15s;
}
.yf-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); }
.yf-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.yf-btn-quiet {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 16px; cursor: pointer;
}

/* ---- Upload ---- */

.yf-upload-menu { position: absolute; right: 12px; top: 56px; width: 260px; }
.yf-upload-hint {
  display: block; width: 100%; text-align: left; font-family: inherit; font-size: 12px; color: var(--text-muted);
  background: none; border: 0; border-top: 1px solid var(--border-light); padding: 10px 12px 6px; margin-top: 4px;
}
.yf-drop {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: rgba(249, 248, 246, 0.84); padding: 16px;
  opacity: 0; transition: opacity .15s;
}
.yf-drop.is-on { opacity: 1; }
.yf-drop-frame {
  width: 100%; height: 100%; border: 2.5px dashed rgba(139, 111, 71, 0.55); border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.yf-drop-sheet {
  width: 120px; height: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: var(--yf-pop-shadow); transform: rotate(-4deg);
}
.yf-drop-title { font-family: var(--serif); font-size: 26px; font-weight: 500; }
.yf-drop-sub { font-size: 14px; color: var(--text-muted); }

.yf-modal {
  position: fixed; inset: 0; z-index: 950; background: var(--yf-scrim);
  display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px;
  opacity: 0; transition: opacity .18s;
}
.yf-modal.is-on { opacity: 1; }
.yf-modal-card {
  width: 560px; max-width: 100%; max-height: 76vh; overflow-y: auto;
  background: var(--input-bg); border: 1px solid var(--bubble-border); border-radius: var(--radius);
  box-shadow: 2px 20px 50px rgba(60, 50, 40, 0.22); padding: 24px 26px;
  transform: translateY(8px); transition: transform .25s var(--spring);
}
.yf-modal.is-on .yf-modal-card { transform: translateY(0); }
.yf-modal-title { font-family: var(--serif); font-size: 21px; font-weight: 500; margin: 0 0 4px; }
.yf-modal-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; }
.yf-reading { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--yf-sticky-ink); margin-bottom: 12px; }
.yf-progress { height: 6px; border-radius: 3px; background: #ece7df; overflow: hidden; }
.yf-progress i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(to right, #c9b28a, #8b6f47); transition: width .4s ease;
}
.yf-reading-note { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; }
.yf-file-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.yf-file-tag {
  flex: none; width: 34px; height: 42px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px;
  font-size: 8px; font-weight: 700; color: var(--accent); text-transform: uppercase;
}
.yf-file-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.yf-review { padding: 16px 0; border-top: 1px solid var(--border-light); }
.yf-review:first-of-type { border-top: 0; padding-top: 0; }
.yf-field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
.yf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.yf-chip {
  font-family: inherit; font-size: 12.5px; font-weight: 600; border-radius: 20px; padding: 7px 13px; cursor: pointer;
  color: var(--text-dim); background: var(--surface); border: 1px solid rgba(175, 170, 162, 0.35);
  transition: transform .2s var(--spring);
}
.yf-chip:hover { transform: translateY(-1px); }
.yf-chip[aria-pressed="true"] { color: #fff5e6; background: var(--accent); border-color: var(--accent); }
.yf-review textarea, .yf-paste input, .yf-paste textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text);
  background: var(--surface); border: 1px solid rgba(175, 170, 162, 0.4); border-radius: 10px;
  padding: 10px 12px; resize: vertical; outline: none;
}
.yf-review textarea:focus, .yf-paste input:focus, .yf-paste textarea:focus { border-color: rgba(139, 111, 71, 0.55); }
.yf-paste label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin: 14px 0 8px; }
.yf-paste label:first-child { margin-top: 0; }
.yf-modal-error { font-size: 12.5px; color: var(--yf-danger); margin-top: 12px; }
.yf-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.yf-modal-actions .yf-btn-primary { font-size: 13px; padding: 9px 18px; border-radius: 10px; }

/* ---- Brand sheet additions (the drawer itself is brand.js's) ---- */

.brand-look { margin-bottom: 18px; }
.brand-look-mood { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--text-muted); margin: 0 0 14px; }
.brand-look-group { margin: 0 -10px 16px; padding: 10px; border-radius: 12px; transition: box-shadow .3s, background .3s; }
.brand-look-group.is-focus, .brand-kit-group.is-focus { background: var(--surface); box-shadow: 0 0 0 2px rgba(139, 111, 71, 0.3); }
.brand-look-group h4 { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin: 0 0 8px; }
.brand-look-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.brand-look-swatch { min-width: 0; }
.brand-look-swatch i { display: block; height: 44px; border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 1px var(--border); }
.brand-look-swatch span { display: block; font-size: 10.5px; color: var(--text-muted); padding: 4px 2px; line-height: 1.35; }
.brand-look-swatch b { color: var(--text); font-weight: 600; }
.brand-look-fonts { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.brand-look-font { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.brand-look-font span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-look-font .is-heading { font-size: 24px; font-weight: 600; }
.brand-look-font .is-body { font-size: 16px; }
.brand-look-font small { flex: none; font-size: 11px; color: var(--text-muted); }
.brand-look-fix {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; cursor: pointer; margin-top: 4px;
}

@media (max-width: 1100px) {
  .yf-reader { grid-template-columns: minmax(0, 1fr); }
  .yf-rail, .yf-sticky-col { position: static; padding-top: 0; }
  .yf-rail-list { display: none; }
  .yf-strip { flex-wrap: wrap; gap: 18px; }
  .yf-strip-rule { display: none; }
}
@media (max-width: 640px) {
  .yf-paper { padding: 24px 20px; }
  .yf-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* The logo and the name keep their own row; the parts wrap underneath. */
  .yf-strip-id { flex-basis: calc(100% - 96px - 18px); }
}
@media (prefers-reduced-motion: reduce) {
  .yf-doc, .yf-strip-part, .yf-add-box, .yf-modal-card, .yf-tool, .yf-chip { transition: none; }
  .yf-ink, .yf-skel-strip .yf-strip-logo { animation: none; }
}