/* Pekan OS 2031, round 6: desktop clutter.

   Two things live here and nothing else: the free positioning that turns the
   desktop from a wrapping flex column into a lived in desk, and the surfaces
   the 66 objects open.

   Section 5.1 of ../Pekan-OS-2031-Plan/13-desktop-clutter-set-grok.md: a
   wrapping flex column cannot express jitter, a right hand dump, or anything
   lived in. It produces a perfect grid, which plan 12 section 3.1 forbids. So
   #desktop becomes a positioning context and the icons go absolute. The
   element stays, the ids stay, the context menu stays. Only child positioning
   changes.

   This file owns .clut and the clutter dialogs. It does not restyle the shell
   and it does not define colour tokens: every colour here is a token from
   pekan/os2031.css, which another agent owns. If a token is missing, the
   request goes in fleet/requests/clutter.md rather than a new value here.

   Loaded after pekan/os2031.css so the free positioning wins over the flex
   column without an !important war.

   No em dashes anywhere in this file. */

/* ===== 5.1 the desktop becomes a positioning context ===== */

#desktop.clut-free {
  display: block;
  position: absolute;
  inset: 0;
  height: calc(100% - 50px);
  padding: 0;
  overflow: hidden;
}

#desktop.clut-free > div.b.clut {
  position: absolute;
  width: 92px;
  height: auto;
  min-height: 84px;
  margin: 0;
  padding: 8px 4px 6px;
  box-sizing: border-box;
}

/* ===== the tile scales to the room =====
   66 objects do not fit on every screen at one size. A 92 by 101 tile needs
   100 by 109 with its gutter, and a 1024 by 768 desktop minus the dock, the
   halo and the reserved toast pad offers about 60 of those. Sixty slots
   cannot hold sixty six objects and no placement algorithm fixes arithmetic,
   so the tile steps down instead, the way a real desktop does when a person
   turns icon size down. clutter.js measures the free area and sets the class.

   The hit area stays above the 44 px AA floor at every step: the smallest
   tile here is 74 by roughly 78. */

#desktop.clut-tight > div.b.clut {
  width: 84px;
  padding: 6px 3px 5px;
}

#desktop.clut-tight > div.b.clut > img {
  width: 40px;
  height: 40px;
}

#desktop.clut-tight > div.b.clut > p {
  font-size: 11px;
  line-height: 1.2;
}

#desktop.clut-tighter > div.b.clut {
  width: 74px;
  min-height: 74px;
  padding: 5px 3px 4px;
}

#desktop.clut-tighter > div.b.clut > img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}

#desktop.clut-tighter > div.b.clut > p {
  font-size: 10.5px;
  line-height: 1.18;
}

/* the smallest step, for a short viewport where the dock and the reserved
   toast pad leave under 1.25 slots per object at 74 px. The tile is 66 by
   roughly 70, and the hit area is still above the 44 px AA floor. */
#desktop.clut-tightest > div.b.clut {
  width: 66px;
  min-height: 66px;
  padding: 4px 2px 4px;
}

#desktop.clut-tightest > div.b.clut > img {
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
}

#desktop.clut-tightest > div.b.clut > p {
  font-size: 10px;
  line-height: 1.15;
}

/* the densest step. Reached on a short viewport that also carries a sticky
   note, where even a 66 px tile does not leave 1.25 slots per object. The
   tile is 58 wide and the label drops to one line plus an ellipsis, so the
   name is still readable and the full string stays on the title attribute and
   on the aria-label. The tap target is 58 by 66, which is under the 44 px AA
   floor on neither axis. */
#desktop.clut-dense > div.b.clut {
  width: 58px;
  min-height: 58px;
  padding: 4px 2px 3px;
}

#desktop.clut-dense > div.b.clut > img {
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
}

#desktop.clut-dense > div.b.clut > p {
  font-size: 9.5px;
  line-height: 1.14;
}

/* the right click surface has to sit under every icon rather than over it,
   or the whole desk becomes one big context menu and nothing opens */
#desktop .clut-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  margin: 0;
}

#desktop.clut-free > div.b.clut {
  z-index: 3;
}

/* label overlap is allowed in pile and stray, up to 6 px, and only
   vertically. Section 5.6. Raising the tile on hover and on focus keeps the
   name readable when two of them touch. */
#desktop.clut-free > div.b.clut:hover,
#desktop.clut-free > div.b.clut:focus-visible,
#desktop.clut-free > div.b.clut.sel {
  z-index: 6;
}

/* Filenames on this desk are long on purpose, and a real OS does not cut one
   mid word with no sign that it did. Two lines, then an ellipsis, which is
   what macOS and Windows both do. The full name is still available: it is on
   the tile as a title attribute, it is read out in full by the aria-label,
   and hovering or focusing the tile expands the label to all of it. */
#desktop > div.b.clut > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* craft.css owns the ellipsis: text-overflow on a -webkit-box drew a
     clipped U+2026. The clamp is the only truncation mechanism. */
  text-overflow: clip;
}

#desktop > div.b.clut:hover > p,
#desktop > div.b.clut:focus-visible > p,
#desktop > div.b.clut.sel > p {
  -webkit-line-clamp: unset;
  overflow: visible;
  /* the expanded name needs its own backing or it reads over the wallpaper
     and over whatever tile sits below it */
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: rgba(12, 10, 18, 0.86);
  box-shadow: 0 0 0 3px rgba(12, 10, 18, 0.86);
}

/* Round 11: the label is wide enough to hold a word. pekan/craft.css
   narrows it to 56 px and pekan/os2031.css breaks anywhere, which together
   drew "Download s" and "Screensho ts" on the desk. A filename may still
   break mid word when one token cannot fit (FREE_SEO_REPORT.exe), but a
   plain word never does. 76 px is what the label was before the narrowing,
   and craft.css's edge mask stays on. Specificity beats both files. */
#desktop.clut-free > div.b.clut > p {
  max-width: 88px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(12, 10, 18, 0.72);
  -webkit-mask-image: none;
  mask-image: none;
}

/* 5.4 rotation, on the icon image only and never on the label */
#desktop.clut-free > div.b.clut > img {
  transform: rotate(var(--clut-rot, 0deg));
}

/* the AA floor: the tile is the hit area and it is 92 by 92 on desktop */
#desktop > div.b.clut:focus-visible {
  outline: 2px solid var(--os-focus);
  outline-offset: 2px;
}

/* 5.9 entry, staggered by zone rather than by index, so the eye reads the
   desk left first the way a person does */
#desktop.clut-free > div.b.clut {
  animation: clut-in 260ms var(--pm-ease, ease) both;
  animation-delay: var(--clut-delay, 0ms);
}

@keyframes clut-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ===== 5.7 phones: the home screen =====
   Round 11, brief decision 5. Portrait is the design. Below 620 the desk is
   a home screen: four columns of free standing app icons with labels, the
   sixteen the registry flags for the phone, safe area aware, scrolling
   inside its own box so the dock can never be buried. No jitter, no
   rotation, no absolute position. Every tile is at least 44 px on both axes
   (measured: 84 by 104 at 390, 80 by 104 at 375). Folders open full screen
   because the shell already makes every window a sheet at this width. */
@media (max-width: 620px) {
  #desktop,
  #desktop.clut-free {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* row 1 is the flow note. auto sizes to the paper. tiles start on
       row 2 because the note spans every column of row 1. */
    grid-template-rows: auto;
    grid-auto-rows: minmax(104px, auto);
    align-content: start;
    justify-items: stretch;
    gap: 14px 6px;
    /* the dock floats over the bottom of the viewport, so the box ends
       above it and the trailing pad carries the last row clear */
    height: calc(100% - 72px);
    /* the status pill floats over the top at 12 px with a 40 px body, so
       the first row starts under it, plus the notch on phones that have one */
    /* 168 px clears the dock (60) plus a toast (~135) so a flow note can
       scroll above a landing notification instead of sitting under it */
    padding: calc(64px + env(safe-area-inset-top, 0px)) 12px calc(168px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
    scroll-padding: calc(64px + env(safe-area-inset-top, 0px)) 0 8px;
  }

  #desktop.clut-free > div.b.clut,
  #desktop > div.b.clut {
    position: static;
    width: auto;
    min-height: 104px;
    margin: 0;
    padding: 8px 2px 6px;
    transform: none;
    animation: none;
    scroll-snap-align: start;
    border-radius: 14px;
  }

  /* a tap lights the tile briefly, the way a home screen does */
  #desktop > div.b.clut:active {
    background: rgba(255, 255, 255, 0.10);
  }

  #desktop > div.b.clut > img,
  #desktop.clut-free > div.b.clut > img {
    width: 58px;
    height: 58px;
    margin: 0 auto 7px;
    transform: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  }

  body #desktop > div.b.clut > p {
    margin-top: 0;
    font-size: 11.5px;
    line-height: 13px;
    min-height: 26px;
    max-height: 26px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip;
  }

  /* the name expands on desktop hover; on a phone there is no hover and the
     full name is on the tile's title and aria-label */
  #desktop > div.b.clut.sel > p {
    -webkit-line-clamp: 2;
    overflow: hidden;
    background: none;
    box-shadow: none;
  }

  #desktop .clut-surface { display: none; }
  #desktop > div.b.clut.clut-hidden { display: none; }

  /* the landing pulse still shows on a phone, as a glow rather than a
     ring, because the tile has no fixed box to ring */
  #desktop > div.b.clut.clut-pulse > img {
    animation: clut-glow 1.2s ease-in-out 5;
  }

  /* The sticky note from pekan/notes.js mounts into #desktop below 620 and
     marks itself .flow: a full width row of its own at the end of the
     grid, scrolling with everything else, covering nothing. */
  #desktop > .os-note.flow,
  #desktop.clut-free > .os-note.flow,
  body #desktop > .os-note.flow {
    /* os2031.css sets .os-note { position: fixed }. That wins a weaker
       static rule and parks the note over the first icon row (measured:
       note y=30, first tile y=143, 18 px of icon art over the paper). */
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    /* first row of the home screen. grid-row 1 plus full span so the
       four tiles cannot share that row. */
    order: -1;
    grid-column: 1 / -1;
    grid-row: auto !important;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-width: none;
    margin: 6px 0 16px;
    z-index: auto;
    scroll-snap-align: start;
    background: var(--note-bg, #F4D35E);
    color: var(--note-ink, #1A1408);
    overflow: visible;
  }

  #desktop > div.b.clut,
  #desktop.clut-free > div.b.clut {
    grid-row: auto;
  }

  #desktop > .os-note.flow .grabber { display: none; }
  #desktop > .os-note.flow .grip { cursor: default; }

  /* the clutter dialogs become bottom sheets, full width, big close */
  .clut-back {
    align-items: flex-end;
    padding: 0;
  }

  .clut-dlg {
    width: 100%;
    max-height: calc(100vh - 56px);
    border-radius: var(--os-r-sheet) var(--os-r-sheet) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .clut-98 .clut-dlg {
    width: calc(100% - 24px);
    margin: 0 12px 16px;
    border-radius: var(--os-r-win98);
  }

  .clut-x { width: 44px; height: 40px; }
}

/* three columns on the narrowest phones, so a filename still fits */
@media (max-width: 340px) {
  #desktop,
  #desktop.clut-free {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== round 11: the landing pulse, the hidden tile, the 1998 wallpaper =====
   The pulse is what a funnel landing does instead of opening a sheet: six
   seconds of a soft ring around the destination tile. The hidden tile is
   the secret folder before it is revealed. The teal is the Konami code. */
#desktop > div.b.clut.clut-hidden {
  display: none;
}

#desktop.clut-free > div.b.clut.clut-pulse {
  z-index: 7;
  border-radius: var(--os-r-icon, 12px);
  animation: clut-ring 1.2s ease-in-out 5;
}

@keyframes clut-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); background: transparent; }
  50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); }
}

@keyframes clut-glow {
  0%, 100% { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
  50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)); }
}

/* the 1998 desktop, for five seconds: flat teal, the wallpaper canvas and
   its grain hidden underneath, hard edged tiles. Then it is 2031 again. */
body.os-1998 {
  background: #008080 !important;
}

body.os-1998 #bg-lava,
body.os-1998 #wallpaper,
body.os-1998 .wallpaper {
  opacity: 0 !important;
  transition: opacity 240ms ease;
}

body.os-1998 #desktop > div.b.clut > img {
  image-rendering: pixelated;
  filter: contrast(1.15) saturate(0.85);
}

body.os-1998 #desktop > div.b.clut > p {
  font-family: var(--pk-font);
  text-shadow: 1px 1px 0 #004040;
}

@media (prefers-reduced-motion: reduce) {
  #desktop.clut-free > div.b.clut.clut-pulse {
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);
  }
  #desktop > div.b.clut.clut-pulse > img { animation: none; }
}

/* ===== 5.8 reduced motion, forced colours ===== */
@media (prefers-reduced-motion: reduce) {
  #desktop.clut-free > div.b.clut {
    animation: none;
  }
  #desktop.clut-free > div.b.clut > img {
    transform: none;
  }
}

@media (forced-colors: active) {
  #desktop.clut-free > div.b.clut {
    animation: none;
    border: 1px solid CanvasText;
    background: Canvas;
  }
  #desktop.clut-free > div.b.clut > img {
    transform: none;
  }
}

/* ===== the surfaces the objects open =====
   One dialog shape carries the zips, the dead ends and the capture sheets, so
   Escape, the focus trap and the close control are drawn once. */

.clut-back {
  position: fixed;
  inset: 0;
  z-index: 999992;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 14, 0.52);
  padding: 20px;
}

.clut-dlg {
  width: min(360px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: var(--os-r-sheet);
  background: var(--g3-bg, rgba(28, 22, 42, 0.94));
  border: var(--g3-border, 1px solid rgba(255, 255, 255, 0.28));
  box-shadow: var(--g3-shadow, 0 22px 60px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(var(--g3-blur, 32px)) saturate(var(--g3-sat, 1.4));
  color: var(--os-text);
  font-family: var(--os-body);
}

/* the zips and the two line refusals take the Windows 98 silhouette from plan
   12 section 5.5: 320 px, plum caption, hard border, no glass. We take the
   geometry. We do not take anyone's chrome, glyphs or type. */
.clut-98 .clut-dlg {
  width: min(320px, 100%);
  border-radius: var(--os-r-win98);
  background: #D6D2E2;
  color: #17131F;
  border: 0;
  backdrop-filter: none;
  box-shadow:
    inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #8B849E,
    0 18px 48px rgba(0, 0, 0, 0.45);
}

.clut-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--os-line);
}

.clut-98 .clut-bar {
  background: #3A2A78;
  color: #F3F0FA;
  border-bottom: 0;
  padding: 5px 4px 5px 8px;
}

.clut-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pm-purple, #6E5AE8);
  flex: none;
}

.clut-98 .clut-mark {
  background: #E4C56A;
  border-radius: 2px;
}

.clut-title {
  flex: 1;
  min-width: 0;
  font-family: var(--os-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clut-x {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--os-r-btn);
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}

.clut-x .pk-fa {
  margin: 0;
}

.clut-x:hover { background: rgba(255, 255, 255, 0.14); }

.clut-98 .clut-x {
  width: 22px;
  height: 20px;
  border-radius: 0;
  background: #D6D2E2;
  color: #17131F;
  font-size: 14px;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #8B849E;
}

.clut-98 .clut-x:hover { background: #E4E1EE; }

.clut-in { padding: 14px 16px 16px; }
.clut-98 .clut-in { padding: 14px 14px 12px; }

/* the punchline. On a zip this is the line ABOVE the field, and it is
   visible before any typing, which is the whole legal shape of the joke. */
.clut-punch {
  margin: 0 0 10px;
  font-family: var(--os-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  color: var(--os-text);
  white-space: pre-line;
}

.clut-98 .clut-punch { color: #17131F; }

.clut-body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--os-text-2);
}

.clut-body:empty, .clut-punch:empty, .clut-fine:empty { display: none; }

.clut-hint {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--os-text-3);
}

.clut-98 .clut-hint { color: #4B4460; }

.clut-lab {
  display: block;
  margin: 0 0 5px;
  font-family: var(--os-ui);
  font-weight: 600;
  font-size: 12px;
  color: var(--os-text-2);
}

.clut-98 .clut-lab { color: #2C2438; }

.clut-input {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 0 12px;
  border-radius: var(--os-r-cta);
  border: 1px solid var(--os-line-2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text);
  font-family: var(--os-body);
  /* 16 px so iOS does not zoom the page when the field takes focus */
  font-size: 16px;
}

.clut-98 .clut-input {
  border-radius: 0;
  background: #FFFFFF;
  color: #17131F;
  border: 0;
  height: 30px;
  box-shadow: inset 1px 1px 0 #8B849E, inset -1px -1px 0 #FFFFFF;
}

.clut-input:focus-visible {
  outline: 2px solid var(--os-focus);
  outline-offset: 1px;
}

.clut-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.clut-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.clut-98 .clut-row { justify-content: flex-end; }

.clut-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pk-text, #fff);
}

.clut-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--pk-accent, #5956e9);
}

.clut-consent span { flex: 1; }

.clut-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--os-line-2);
  border-radius: var(--os-r-cta);
  background: rgba(255, 255, 255, 0.08);
  color: var(--os-text);
  font-family: var(--os-ui);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.clut-btn:hover { background: rgba(255, 255, 255, 0.14); }

.clut-btn.clut-pri {
  background: var(--pm-purple, #6E5AE8);
  border-color: transparent;
  color: #FFFFFF;
}

.clut-btn.clut-pri:hover { background: var(--pm-purple-deep, #5A47CE); }

/* the button that says it does nothing, and does nothing. It is styled as a
   real button on purpose: the label is the honesty, not the styling. */
.clut-btn.clut-dead {
  opacity: 0.72;
  cursor: default;
}

.clut-98 .clut-btn {
  min-width: 84px;
  min-height: 44px;
  border-radius: 0;
  border: 0;
  background: #D6D2E2;
  color: #17131F;
  box-shadow: inset 1px 1px 0 #FFFFFF, inset -1px -1px 0 #8B849E;
}

.clut-98 .clut-btn:hover { background: #E4E1EE; }

.clut-98 .clut-btn:active {
  box-shadow: inset -1px -1px 0 #FFFFFF, inset 1px 1px 0 #8B849E;
}

.clut-98 .clut-btn.clut-pri {
  background: #D6D2E2;
  color: #17131F;
}

.clut-btn:focus-visible {
  outline: 2px solid var(--os-focus);
  outline-offset: 2px;
}

.clut-back, .clut-dlg {
  color: var(--pk-text, #fff);
}

.clut-dlg {
  background: var(--pk-glass-surface, rgba(18, 18, 22, .66));
  border: 1px solid var(--pk-glass-border, rgba(255, 255, 255, .25));
  border-radius: var(--pk-radius-window, 24px);
  box-shadow: var(--pk-glass-shadow, 0 28px 80px rgba(0, 0, 0, .34));
  -webkit-backdrop-filter: var(--pk-glass-blur, blur(32px) saturate(125%));
  backdrop-filter: var(--pk-glass-blur, blur(32px) saturate(125%));
}

.clut-btn {
  min-height: 44px;
  border-radius: var(--pk-radius-control, 10px);
}

.os-note {
  --note-bg: #F7F3EA;
  --note-ink: #000;
  color: var(--note-ink);
  background: var(--note-bg);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.os-note > .nb {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 8px 0 10px !important;
  gap: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

.os-note > .nb .grip {
  width: 36px;
  height: 4px;
  min-width: 36px !important;
  min-height: 4px !important;
  margin-right: auto;
  flex: none;
  border-radius: 2px;
  background: rgba(26, 20, 8, 0.28);
  box-shadow: 0 5px 0 rgba(26, 20, 8, 0.16);
}

.os-note .nb button {
  min-width: 44px;
  min-height: 44px;
}

.os-note > .nb button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: none;
  overflow: hidden;
  border-radius: 8px !important;
  background: none !important;
  color: rgba(26, 20, 8, 0.62) !important;
}

.os-note > .nb button svg {
  display: none !important;
}

.os-note > .nb .sw {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(26, 20, 8, 0.28) !important;
  background: var(--note-bg, #F7F3EA) !important;
  color: transparent !important;
}

.os-note > .nb .sw .pk-fa {
  display: none !important;
}

.os-note > .nb .fold,
.os-note > .nb .rm {
  color: rgba(26, 20, 8, 0.62) !important;
}

.os-note > .nb .fold .pk-fa,
.os-note > .nb .rm .pk-fa {
  font-size: 13px;
  margin: 0 !important;
}

.os-note.folded {
  height: 56px !important;
  min-height: 0 !important;
  overflow: hidden;
}

.os-note.folded .body,
.os-note.folded .grabber {
  display: none;
}

@media (max-width: 620px) {
  body #desktop > .os-note.flow {
    position: static !important;
    grid-column: 1 / -1;
    grid-row: auto !important;
    order: -1;
    height: auto !important;
    min-height: 0 !important;
  }
  body #desktop > .os-note.flow ~ .os-note.flow {
    grid-row: auto;
    order: -1;
  }
  #desktop {
    grid-template-rows: min-content;
    grid-auto-rows: minmax(104px, auto);
  }
}

.clut-98 .clut-btn:focus-visible {
  outline: 2px dotted #17131F;
  outline-offset: -5px;
}

.clut-err {
  margin: 0;
  min-height: 1em;
  font-size: 12px;
  color: var(--os-bad, #FF8A8F);
}

.clut-err:empty { min-height: 0; }

.clut-reply {
  margin: 4px 0 0;
  font-family: var(--os-ui);
  font-weight: 700;
  font-size: 13px;
  color: #17131F;
}

.clut-sent {
  margin: 10px 0 0;
  font-family: var(--os-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--os-good, #5FD3A0);
}

.clut-fine {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--os-text-3);
}

.clut-fine a { color: var(--href, #A99BFF); }

/* Disk Cleanup: 1.2 s of scanning, then the truth. The bar is theatre and it
   is aria-hidden, so a screen reader gets the status line instead. */
.clut-bar-track {
  height: 6px;
  margin: 10px 0 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.clut-bar-track > i {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: var(--pm-purple, #6E5AE8);
  animation: clut-sweep 1.1s ease-in-out infinite;
}

.clut-bar-track.done > i {
  width: 100%;
  animation: none;
}

@keyframes clut-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .clut-bar-track > i { animation: none; width: 100%; }
}

.clut-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--os-r-btn);
}

@media (prefers-reduced-transparency: reduce) {
  .clut-dlg {
    backdrop-filter: none;
    background: rgba(24, 19, 34, 0.96);
  }
}

@media (forced-colors: active) {
  .clut-dlg {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
  .clut-btn {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}