/* theyhate cloud — same visual language as the main site:
   off-white paper, near-black ink, 4px rules, Archivo wide lowercase titles,
   Space Mono for metadata, pastel accents per file type. */

:root {
    --bg: #FAF9F6;
    --ink: #21201E;
    --muted: #6E6C67;
    --line: #21201E;
    --soft: #EEEDE8;
    --soft-2: #E3E1DA;
    --rule: 4px;
    --audio: #FFB3D9;
    --image: #B3EAEA;
    --video: #FFF2B3;
    --archive: #C6F0B5;
    --doc: #D9B3FF;
    --project: #B3D1FF;
    --danger: #E5484D;
    --mono: 'Space Mono', ui-monospace, monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --wide: 'Archivo', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- top bar ---------- */
.c-top {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 18px 24px 0;
    border-bottom: var(--rule) solid var(--line);
    background: var(--ink);
    color: var(--bg);
}
.c-brand {
    font-family: var(--mono);
    font-size: 13px;
    text-decoration: none;
    padding-bottom: 14px;
    opacity: .75;
}
.c-brand:hover { opacity: 1; }
.c-title {
    font-family: var(--wide);
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: .8;
    letter-spacing: -0.02em;
    margin-bottom: -0.1em;
    text-transform: lowercase;
    user-select: none;
}
.c-top-meta {
    margin-left: auto;
    display: flex;
    gap: 18px;
    font-family: var(--mono);
    font-size: 12px;
    padding-bottom: 14px;
    opacity: .8;
    white-space: nowrap;
}

/* ---------- shell ---------- */
.c-shell {
    display: grid;
    grid-template-columns: 200px 1fr;
    height: calc(100% - var(--top-h, 96px));
}
.c-side {
    border-right: var(--rule) solid var(--line);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.c-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--wide);
    font-variation-settings: "wdth" 115, "wght" 650;
    font-size: 15px;
    text-align: left;
    border: 2px solid transparent;
}
@media (hover: hover) { .c-side-item:hover { background: var(--soft); } }
.c-side-item[aria-current="true"] { background: var(--ink); color: var(--bg); }
.c-side-item.is-drop { border-color: var(--ink); background: var(--project); color: var(--ink); }

.c-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ---------- toolbar ---------- */
.c-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 2px solid var(--line);
    flex-wrap: wrap;
}
.c-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    flex: 1 1 260px;
    font-family: var(--wide);
    font-variation-settings: "wdth" 115, "wght" 700;
    font-size: 18px;
}
.c-crumb {
    padding: 4px 6px;
    border: 2px solid transparent;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (hover: hover) { button.c-crumb:hover { background: var(--soft); } }
.c-crumb.is-current { cursor: default; }
.c-crumb.is-drop { border-color: var(--ink); background: var(--project); }
.c-crumb-sep { color: var(--muted); font-family: var(--mono); font-size: 14px; }

.c-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-search {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--line);
    padding: 0 10px;
    height: 38px;
    background: #fff;
}
.c-search svg { width: 16px; height: 16px; }
.c-search input { border: 0; outline: 0; background: transparent; width: 160px; height: 100%; }
.c-btn {
    height: 38px;
    padding: 0 14px;
    border: 2px solid var(--line);
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg);
    white-space: nowrap;
}
@media (hover: hover) { .c-btn:hover { background: var(--soft); } }
.c-btn-solid { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .c-btn-solid:hover { background: #000; } }
.c-icon-btn { width: 38px; padding: 0; display: grid; place-items: center; }
.c-list[data-layout="list"] ~ * .i-list, .c-icon-btn .i-list { display: none; }
body[data-layout="grid"] .c-icon-btn .i-list { display: block; }
body[data-layout="grid"] .c-icon-btn .i-grid { display: none; }

.c-upload-wrap { position: relative; }
.c-upload-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 150px;
    background: var(--bg);
    border: 2px solid var(--line);
    box-shadow: 6px 6px 0 var(--ink);
    display: flex;
    flex-direction: column;
}
.c-upload-menu button { text-align: left; padding: 10px 14px; font-family: var(--mono); font-size: 13px; }
@media (hover: hover) { .c-upload-menu button:hover { background: var(--ink); color: var(--bg); } }

/* ---------- selection bar ---------- */
/* Floats over the list so selecting never shifts rows (a shifting list
   breaks double-click). */
.c-selbar {
    position: fixed;
    left: calc(200px + 20px);
    bottom: 20px;
    z-index: 45;
    max-width: calc(100vw - 200px - 40px);
    box-shadow: 6px 6px 0 rgba(33, 32, 30, .25);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 13px;
    flex-wrap: wrap;
}
.c-selbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#c-selcount { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-selbar-actions button {
    padding: 5px 10px;
    border: 1.5px solid var(--bg);
    font-family: var(--mono);
    font-size: 12px;
}
@media (hover: hover) { .c-selbar-actions button:hover { background: var(--bg); color: var(--ink); } }
@media (hover: hover) { .c-selbar-actions button.is-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; } }

.c-trash-note {
    padding: 10px 20px;
    font-family: var(--mono);
    font-size: 12px;
    background: var(--soft);
    border-bottom: 2px solid var(--line);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.c-trash-note button { text-decoration: underline; font-family: var(--mono); font-size: 12px; }

/* ---------- list ---------- */
.c-list {
    flex: 1;
    overflow: auto;
    outline: none;
    position: relative;
    padding-bottom: 120px;
}
.c-head, .c-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 110px 110px;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}
.c-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    border-bottom: 1px solid var(--soft-2);
    height: 34px;
}
.c-head button {
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: lowercase;
    height: 100%;
}
.c-head button:last-child, .c-row .c-size { text-align: right; }
.c-head button[aria-sort]::after { content: ' ↑'; }
.c-head button[aria-sort="descending"]::after { content: ' ↓'; }
.c-head button[aria-sort] { color: var(--ink); }

.c-row {
    height: 46px;
    border-bottom: 1px solid var(--soft-2);
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    position: relative;
}
@media (hover: hover) { .c-row:hover { background: var(--soft); } }
.c-row.is-selected { background: var(--ink); color: var(--bg); }
.c-row.is-selected .c-meta { color: #CFCDC6; }
.c-row.is-drop { outline: 3px solid var(--ink); outline-offset: -3px; background: var(--project); color: var(--ink); }
.c-row.is-cut { opacity: .45; }
.c-row.is-uploading { color: var(--muted); }

.c-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.c-check {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    flex: none;
    display: grid;
    place-items: center;
    opacity: 0;
}
.c-row.is-selected .c-check, body.is-touch .c-check, body.has-selection .c-check { opacity: 1; }
@media (hover: hover) { .c-row:hover .c-check { opacity: 1; } }
.c-row.is-selected .c-check::after { content: ''; width: 8px; height: 8px; background: currentColor; }
.c-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.c-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.c-row.is-selected .c-sub { color: #CFCDC6; }
.c-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-rename {
    font: inherit;
    border: 2px solid var(--ink);
    background: #fff;
    color: var(--ink);
    padding: 3px 6px;
    width: min(100%, 420px);
    outline: none;
}
.c-more {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: none;
    place-items: center;
    font-size: 18px;
    line-height: 1;
}
body.is-touch .c-more { display: grid; }

/* file-type icon */
.c-ico {
    width: 30px;
    height: 34px;
    flex: none;
    position: relative;
    display: grid;
    place-items: center;
}
.c-ico svg { width: 30px; height: 30px; stroke-width: 1.6; }
.c-ico.is-folder svg { fill: var(--project); stroke: var(--ink); }
.c-row.is-selected .c-ico.is-folder svg { stroke: var(--bg); }
.c-ico.is-file {
    width: 26px;
    height: 32px;
    border: 2px solid currentColor;
    background: var(--tint, var(--soft));
    color: var(--ink);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
    overflow: hidden;
    clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%);
}
.c-row.is-selected .c-ico.is-file { border-color: var(--bg); }
.c-ico[data-t="audio"] { --tint: var(--audio); }
.c-ico[data-t="image"] { --tint: var(--image); }
.c-ico[data-t="video"] { --tint: var(--video); }
.c-ico[data-t="archive"] { --tint: var(--archive); }
.c-ico[data-t="doc"] { --tint: var(--doc); }
.c-ico[data-t="project"] { --tint: var(--project); }

.c-progress { height: 6px; background: var(--soft-2); position: relative; overflow: hidden; }
.c-progress i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.c-row.is-selected .c-progress { background: #4A4945; }
.c-row.is-selected .c-progress i { background: var(--bg); }

.c-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
}
.c-empty strong {
    display: block;
    font-family: var(--wide);
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: 34px;
    color: var(--ink);
    margin-bottom: 8px;
}

/* grid layout */
body[data-layout="grid"] .c-head { display: none; }
body[data-layout="grid"] .c-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    padding: 16px;
}
body[data-layout="grid"] .c-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding: 14px 8px 10px;
    border: 2px solid transparent;
    gap: 6px;
    text-align: center;
}
@media (hover: hover) { body[data-layout="grid"] .c-row:hover { border-color: var(--soft-2); } }
body[data-layout="grid"] .c-row > :not(.c-name):not(.c-more) { display: none; }
body[data-layout="grid"] .c-name { flex-direction: column; gap: 8px; width: 100%; }
body[data-layout="grid"] .c-check { position: absolute; top: 6px; left: 6px; }
body[data-layout="grid"] .c-ico { width: 64px; height: 64px; }
body[data-layout="grid"] .c-ico svg { width: 64px; height: 64px; stroke-width: 1.2; }
body[data-layout="grid"] .c-ico.is-file { width: 50px; height: 62px; font-size: 11px; }
body[data-layout="grid"] .c-label {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    font-size: 13px;
    max-width: 100%;
}
body[data-layout="grid"] .c-sub { display: block; margin: 2px 0 0; }

/* ---------- drop overlay ---------- */
.c-drop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(250, 249, 246, .82);
    display: grid;
    place-items: center;
    pointer-events: none;
}
.c-drop-box {
    border: var(--rule) dashed var(--ink);
    padding: 48px 64px;
    text-align: center;
    background: var(--bg);
}
.c-drop-big {
    font-family: var(--wide);
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: .9;
}
.c-drop-to { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ---------- uploads panel ---------- */
.c-uploads {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    width: min(420px, calc(100vw - 40px));
    background: var(--bg);
    border: var(--rule) solid var(--line);
    box-shadow: 8px 8px 0 var(--ink);
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 560px);
}
.c-uploads-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ink); color: var(--bg); }
.c-uploads-toggle { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#c-uploads-title { font-family: var(--wide); font-variation-settings: "wdth" 115, "wght" 800; font-size: 16px; }
.c-uploads-sub { font-family: var(--mono); font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-uploads-total { height: 5px; background: var(--soft-2); }
.c-uploads-total i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }
.c-uploads-list { list-style: none; overflow: auto; flex: 1; }
.c-uploads.is-collapsed .c-uploads-list,
.c-uploads.is-collapsed .c-uploads-hint { display: none; }
.c-up {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--soft-2);
}
.c-up-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-up-actions { display: flex; gap: 4px; grid-row: span 2; align-self: center; }
.c-up-status { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.c-up .c-progress { grid-column: 1; }
.c-up.is-error .c-up-status { color: var(--danger); }
.c-up.is-done .c-progress i { background: #3C9A5F; }
.c-uploads-hint { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 8px 12px 10px; line-height: 1.5; }
.c-mini {
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 8px;
    border: 1.5px solid currentColor;
    text-decoration: none;
    white-space: nowrap;
}
@media (hover: hover) { .c-mini:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } }
@media (hover: hover) { .c-uploads-head .c-mini:hover { background: var(--bg); color: var(--ink); } }

/* ---------- context menu ---------- */
.c-menu {
    position: fixed;
    z-index: 70;
    min-width: 200px;
    background: var(--bg);
    border: 2px solid var(--line);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 4px 0;
}
.c-menu button {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 14px;
}
.c-menu button kbd { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.c-menu button:focus-visible, .c-menu button:active { background: var(--ink); color: var(--bg); outline: none; }
@media (hover: hover) { .c-menu button:hover { background: var(--ink); color: var(--bg); } }
@media (hover: hover) { .c-menu button:hover kbd { color: #CFCDC6; } }
@media (hover: hover) { .c-menu button.is-danger:hover { background: var(--danger); } }
.c-menu hr { border: 0; border-top: 1px solid var(--soft-2); margin: 4px 0; }

/* ---------- modals ---------- */
.c-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(33, 32, 30, .55);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 20px;
}
.c-preview-box {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    height: min(86vh, 900px);
    height: min(86dvh, 900px);
    background: var(--bg);
    border: var(--rule) solid var(--line);
    display: flex;
    flex-direction: column;
}
.c-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--bg);
}
.c-preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--wide); font-variation-settings: "wdth" 115, "wght" 750; }
.c-preview-count { font-family: var(--mono); font-size: 12px; opacity: .7; white-space: nowrap; }
.c-preview-count:empty { display: none; }
.c-preview-close { order: 4; }
@media (hover: hover) { .c-preview-head .c-mini:hover { background: var(--bg); color: var(--ink); } }
.c-preview-foot { display: none; }
.c-preview-body { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; overflow: auto; }
.c-preview-body img, .c-preview-body video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.c-preview-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.c-preview-body audio { width: 100%; max-width: 640px; min-width: 0; }
.c-preview-file { text-align: center; display: grid; gap: 18px; justify-items: center; width: 100%; min-width: 0; }
.c-preview-file .c-ico { width: 110px; height: 136px; font-size: 18px; border-width: 4px; }
.c-preview-file p { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.c-preview-file strong { font-family: var(--wide); font-variation-settings: "wdth" 115, "wght" 800; font-size: 22px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }

.c-dialog-box {
    width: 100%;
    max-width: 480px;
    min-width: 0;
    max-height: 86vh;
    overflow: auto;
    background: var(--bg);
    border: var(--rule) solid var(--line);
    box-shadow: 10px 10px 0 var(--ink);
    padding: 22px;
    display: grid;
    gap: 16px;
}
.c-dialog-box h2 {
    font-family: var(--wide);
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: 28px;
    line-height: .95;
    text-transform: lowercase;
}
.c-dialog-box p { font-size: 14px; line-height: 1.5; }
.c-dialog-box input[type="text"], .c-dialog-box input[type="email"], .c-dialog-box select {
    width: 100%;
    height: 42px;
    border: 2px solid var(--line);
    padding: 0 10px;
    background: #fff;
    font: inherit;
}
.c-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.c-btn.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.c-picker { border: 2px solid var(--line); max-height: 320px; overflow: auto; }
.c-picker-crumbs { font-family: var(--mono); font-size: 12px; padding: 8px 10px; border-bottom: 2px solid var(--line); display: flex; gap: 4px; flex-wrap: wrap; }
.c-picker-crumbs button { text-decoration: underline; font-family: var(--mono); font-size: 12px; }
.c-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--soft-2); }
@media (hover: hover) { .c-picker-row:hover { background: var(--soft); } }
.c-picker-row[disabled] { opacity: .35; cursor: not-allowed; }
.c-picker-row svg { width: 22px; height: 22px; fill: var(--project); }
.c-picker-empty { padding: 16px 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

.c-members { display: grid; border: 2px solid var(--line); }
.c-member { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--soft-2); font-size: 14px; }
.c-member:last-child { border-bottom: 0; }
.c-member > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.c-member small { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.c-member select { height: 30px; width: auto; border: 1.5px solid var(--line); background: #fff; font-family: var(--mono); font-size: 12px; }
.c-member-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.c-member-add select { width: auto; }

/* ---------- toast ---------- */
.c-toast {
    position: fixed;
    right: 20px;
    top: calc(var(--top-h, 96px) + 14px);
    z-index: 90;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 13px;
    padding: 12px 18px;
    max-width: calc(100vw - 40px);
    box-shadow: 6px 6px 0 rgba(0,0,0,.2);
}
.c-toast.is-error { background: var(--danger); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
    body { overflow: auto; }
    .c-top { padding: 14px 16px 0; gap: 12px; flex-wrap: wrap; }
    .c-top-meta { width: 100%; order: 3; margin: 0; padding: 0 0 10px; opacity: .7; gap: 12px; min-width: 0; }
    .c-me { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .c-brand { padding-bottom: 10px; }
    .c-shell { display: block; height: auto; }
    .c-side {
        flex-direction: row;
        border-right: 0;
        border-bottom: 2px solid var(--line);
        padding: 8px 12px;
        overflow-x: auto;
    }
    .c-side-item { padding: 8px 10px; font-size: 14px; white-space: nowrap; }
    .c-toolbar { padding: 12px 16px; gap: 10px; }
    .c-tools { width: 100%; }
    .c-search { flex: 1; }
    .c-search input { width: 100%; }
    .c-list { overflow: visible; padding-bottom: 200px; }
    .c-head, .c-row { grid-template-columns: minmax(0, 1fr) 84px; padding: 0 44px 0 16px; }
    .c-head .c-col-by, .c-head [data-sort="updated_at"], .c-row .c-date, .c-row .c-by { display: none; }
    .c-row { height: 56px; }
    .c-uploads { right: 10px; bottom: 10px; width: calc(100vw - 20px); box-shadow: 4px 4px 0 var(--ink); }
    .c-selbar { left: 10px; right: 10px; bottom: 10px; max-width: none; }
    body.has-selection .c-uploads { bottom: 74px; }
    .c-toast { left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
    /* Preview = full-screen sheet on phones: name on its own line, all
       buttons in one row underneath, content centred. */
    .c-modal:has(.c-preview-box) { padding: 0; place-items: stretch; }
    .c-preview-box { max-width: none; height: 100vh; height: 100dvh; border: 0; }
    .c-preview-head { gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
    .c-preview-head .c-preview-count { display: none; }
    .c-preview-close { order: 0; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; font-size: 14px; }
    .c-preview-dl { padding: 10px 12px; }
    .c-preview-name { font-size: 15px; text-align: center; }
    .c-preview-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top: 2px solid var(--line);
    }
    .c-preview-foot[hidden] { display: none; }
    .c-preview-foot .c-mini { padding: 11px 16px; font-size: 12px; }
    .c-preview-foot .c-preview-count { color: var(--muted); opacity: 1; }
    .c-preview-body { padding: 20px 16px; }
    .c-preview-file { gap: 14px; }
    .c-preview-file .c-ico { width: 84px; height: 104px; font-size: 15px; }
    .c-preview-file strong { font-size: 19px; }
    .c-modal:has(.c-dialog-box) { padding: 12px; }
    .c-dialog-box { padding: 18px; box-shadow: 6px 6px 0 var(--ink); }
    .c-member-add { grid-template-columns: minmax(0, 1fr) auto; }
    .c-member-add input { grid-column: 1 / -1; }
}

/* =====================================================================
   MOTION — subtle, tactile, in the site's hard-edged language:
   buttons lift onto a hard offset shadow and press flat when clicked,
   overlays ease in, rows settle in when a folder opens.
   Hover lifts only on real pointers; everything off for reduced motion.
   ===================================================================== */
:root {
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: 120ms;
    --t-med: 200ms;
}

.c-btn:not(.c-icon-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.c-btn .c-arrow { width: 15px; height: 15px; stroke-width: 2.2; }
.c-plus { display: inline-block; font-size: 15px; line-height: 1; }

/* colour changes are always fine */
.c-btn, .c-mini, .c-side-item, .c-crumb, .c-row, .c-search,
.c-selbar-actions button, .c-upload-menu button, .c-picker-row {
    transition:
        background-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out),
        transform var(--t-med) var(--ease-out),
        opacity var(--t-fast) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {

    /* ---- buttons: lift on hover, press on click ---- */
    @media (hover: hover) {
        .c-btn:hover:not(:disabled) {
            transform: translate(-2px, -2px);
            box-shadow: 2px 2px 0 var(--ink);
        }
        .c-btn-solid:hover:not(:disabled) { background: var(--ink); box-shadow: 3px 3px 0 #7d7a73; transform: translate(-3px, -3px); }
        .c-btn.is-danger:hover:not(:disabled) { box-shadow: 3px 3px 0 #8f1f23; transform: translate(-3px, -3px); }
        .c-mini:hover { transform: translate(-1px, -1px); box-shadow: 1px 1px 0 currentColor; }
        .c-uploads-head .c-mini:hover, .c-preview-head .c-mini:hover { box-shadow: 1px 1px 0 #7d7a73; }
        .c-selbar-actions button:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 #7d7a73; }

        /* icons with a little character */
        .c-btn:hover .c-plus { transform: rotate(90deg); }
        .c-btn:hover .c-arrow { transform: translateY(-2px); }
        .c-icon-btn:hover svg { transform: scale(1.08); }
        .c-side-item:hover svg { transform: translateX(2px); }
        .c-row:hover .c-ico { transform: translateY(-1px); }
        button.c-crumb:hover { background-size: 100% 2px; }
    }
    .c-btn:active:not(:disabled), .c-mini:active, .c-selbar-actions button:active {
        transform: translate(0, 0);
        box-shadow: 0 0 0 transparent;
        transition-duration: 60ms;
    }
    .c-icon-btn:active svg, .c-more:active { transform: scale(.9); }
    .c-plus, .c-arrow, .c-icon-btn svg, .c-side-item svg, .c-ico, .c-more {
        transition: transform var(--t-med) var(--ease-spring);
    }

    /* crumbs: underline grows instead of a box */
    button.c-crumb {
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: 6px calc(100% - 3px);
        background-size: 0 2px;
        transition: background-size var(--t-med) var(--ease-out), background-color var(--t-fast);
    }
    @media (hover: hover) { button.c-crumb:hover { background-color: transparent; background-size: calc(100% - 12px) 2px; } }

    /* search: hard shadow when focused */
    .c-search:focus-within { box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
    .c-search svg { transition: transform var(--t-med) var(--ease-spring); }
    .c-search:focus-within svg { transform: scale(1.12) rotate(-8deg); }

    /* layout toggle: the incoming icon spins in */
    .c-icon-btn svg { animation: c-spin-in 260ms var(--ease-spring); }

    /* selection checkbox fills from the centre */
    .c-check::after { content: ''; width: 8px; height: 8px; background: currentColor; transform: scale(0); transition: transform 160ms var(--ease-spring); }
    .c-row.is-selected .c-check::after { transform: scale(1); }

    /* ---- rows ---- */
    .c-rows.is-entering .c-row { animation: c-row-in 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms); }
    .c-row.is-new { animation: c-row-new 1400ms var(--ease-out); }
    .c-row.is-new.is-selected { animation: none; }
    .c-row.is-drop { animation: c-drop-pulse 900ms var(--ease-out) infinite; }
    .c-row.is-cut { transform: scale(.985); }

    /* ---- overlays: in ---- */
    .c-upload-menu { transform-origin: top right; animation: c-pop-in 150ms var(--ease-out); }
    .c-menu { transform-origin: top left; animation: c-pop-in 130ms var(--ease-out); }
    .c-modal { animation: c-fade-in 160ms var(--ease-out); }
    .c-dialog-box, .c-preview-box { animation: c-rise-in 220ms var(--ease-out); }
    .c-preview-body > * { animation: c-fade-in 240ms 60ms var(--ease-out) both; }
    .c-selbar { animation: c-rise-in 200ms var(--ease-out); }
    .c-toast { animation: c-toast-in 220ms var(--ease-out); }
    .c-uploads { animation: c-rise-in 260ms var(--ease-out); }
    .c-uploads.is-collapsed .c-uploads-total { transition: none; }
    .c-drop { animation: c-fade-in 140ms var(--ease-out); }
    .c-drop-box { animation: c-drop-in 240ms var(--ease-spring); }
    .c-empty strong { animation: c-rise-in 320ms var(--ease-out) both; }

    /* ---- overlays: out (JS sets data-closing, then hides) ---- */
    .c-modal[data-closing] { animation: c-fade-out 140ms var(--ease-out) forwards; }
    .c-modal[data-closing] .c-dialog-box,
    .c-modal[data-closing] .c-preview-box { animation: c-sink-out 140ms var(--ease-out) forwards; }
}

@keyframes c-fade-in   { from { opacity: 0; } }
@keyframes c-fade-out  { to { opacity: 0; } }
@keyframes c-pop-in    { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes c-rise-in   { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes c-sink-out  { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes c-toast-in  { from { opacity: 0; transform: translateY(-8px); } }
@keyframes c-row-in    { from { opacity: 0; transform: translateY(6px); } }
@keyframes c-row-new   { 0%, 30% { background-color: var(--project); } 100% { background-color: transparent; } }
@keyframes c-spin-in   { from { opacity: 0; transform: rotate(-90deg) scale(.6); } }
@keyframes c-drop-in   { from { opacity: 0; transform: scale(.94); } }
@keyframes c-drop-pulse { 0%, 100% { outline-offset: -3px; } 50% { outline-offset: -6px; } }

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .c-toast { animation-name: c-toast-in; }
    .c-modal:has(.c-preview-box) .c-preview-box { animation: c-sheet-up 260ms var(--ease-out); }
    @keyframes c-sheet-up { from { transform: translateY(24px); opacity: 0; } }
}

/* =====================================================================
   PREVIEW + NAVIGATION TRANSITIONS (Quick Look / Dropbox-style)
   - opening a file zooms the viewer out of the clicked file's icon,
     closing shrinks it back (JS: Web Animations on .c-preview-box)
   - prev/next slides the content sideways; side arrows on desktop,
     swipe on phones
   - going into a folder slides rows in from the right, going back
     from the left
   ===================================================================== */
.c-preview-box { position: relative; }
.c-preview-side {
    position: absolute;
    top: calc(50% + 24px);
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--bg);
    border: 2px solid var(--line);
    z-index: 2;
    opacity: .55;
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.c-preview-side.is-prev { left: 14px; }
.c-preview-side.is-next { right: 14px; }
.c-preview-side svg { width: 22px; height: 22px; stroke-width: 2.2; }
.c-preview-box:hover .c-preview-side { opacity: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .c-preview-side:hover { transform: translate(-2px, calc(-50% - 2px)); box-shadow: 2px 2px 0 var(--ink); }
    .c-preview-side.is-prev:hover svg { transform: translateX(-2px); }
    .c-preview-side.is-next:hover svg { transform: translateX(2px); }
    .c-preview-side svg { transition: transform var(--t-med) var(--ease-spring); }
}
.c-preview-side:active { transform: translateY(-50%) scale(.94); box-shadow: none; }
/* desktop: arrows live on the sides; phones: in the header + swipe */
@media (max-width: 760px) { .c-preview-side { display: none; } }

@media (prefers-reduced-motion: no-preference) {
    /* zoom-open: JS drives the box, CSS only fades the backdrop colour
       (an opacity fade on the modal would hide the zooming box too) */
    .c-modal.is-zoom { animation: c-backdrop-in 240ms var(--ease-out); }
    .c-modal.is-zoom .c-preview-box { animation: none; }
    .c-modal[data-zoom-closing] { animation: c-backdrop-out 230ms var(--ease-out) forwards; }

    /* folder navigation direction */
    .c-rows.is-entering[data-dir="forward"] .c-row { animation-name: c-row-in-fwd; animation-delay: calc(var(--i, 0) * 12ms); }
    .c-rows.is-entering[data-dir="back"] .c-row { animation-name: c-row-in-back; animation-delay: calc(var(--i, 0) * 12ms); }
    .c-crumbs.is-entering .c-crumb.is-current { animation: c-row-in-fwd 260ms var(--ease-out); }
    .c-crumbs.is-entering[data-dir="back"] .c-crumb.is-current { animation-name: c-row-in-back; }
}
@keyframes c-backdrop-in  { from { background-color: rgba(33, 32, 30, 0); } }
@keyframes c-backdrop-out { to { background-color: rgba(33, 32, 30, 0); } }
@keyframes c-row-in-fwd   { from { opacity: 0; transform: translateX(18px); } }
@keyframes c-row-in-back  { from { opacity: 0; transform: translateX(-18px); } }

/* =====================================================================
   POLISH — from a full walkthrough on a phone
   ===================================================================== */

/* Never let anything widen the page: a row sliding in from the right made
   iOS scroll sideways (header shifted, white strip on the right). */
html, body { overflow-x: hidden; overflow-x: clip; }
.c-rows { overflow-x: clip; }

/* name + secondary line (uploading / "in folder") stacked */
.c-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.c-in { display: none; }
body[data-layout="grid"] .c-text { align-items: center; max-width: 100%; }

/* loading a folder that isn't cached yet: dim the old one right away */
.c-rows.is-loading { opacity: .4; transition: opacity 150ms var(--ease-out); pointer-events: none; }

/* things that make no sense in the trash */
body[data-view="trash"] .c-search,
body[data-view="trash"] #c-new-folder,
body[data-view="trash"] .c-upload-wrap { display: none; }

/* selection bar: actions + a separate clear button */
.c-selclear { padding: 5px 10px; border: 1.5px solid var(--bg); font-family: var(--mono); font-size: 12px; }
@media (hover: hover) { .c-selclear:hover { background: var(--bg); color: var(--ink); } }
.c-sel-short { display: none; }
body.is-renaming .c-selbar { display: none !important; }

/* grid: the ⋯ button belongs in the tile's corner */
body[data-layout="grid"] .c-more { top: 4px; right: 4px; transform: none; }

/* move picker: fixed height so the dialog doesn't jump while browsing */
.c-picker { height: 300px; max-height: 46vh; display: flex; flex-direction: column; }
.c-picker-crumbs { position: sticky; top: 0; background: var(--bg); z-index: 1; }
.c-picker-row::after { content: '›'; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); }
.c-picker-row[disabled]::after { content: ''; }
.c-picker-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* uploads panel: chevron, hint only while running */
.c-uploads-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
#c-uploads-title { grid-column: 1; }
.c-uploads-sub { grid-column: 1; }
.c-uploads-chev { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.c-uploads.is-collapsed .c-uploads-chev { transform: rotate(180deg); }
.c-uploads.is-idle .c-uploads-hint { display: none; }

/* action sheet backdrop (phones) */
.c-sheet-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(33, 32, 30, .45); }
.c-menu-title { display: none; }

@media (max-width: 760px) {
    /* iOS zooms into any input under 16px — that zoom shifted the page */
    .c-search input, .c-rename, .c-dialog-box input, .c-dialog-box select { font-size: 16px; }

    /* toolbar: search full width + view toggle, then folder / upload */
    .c-tools { display: grid; grid-template-columns: 1fr 1fr 38px; gap: 8px; }
    .c-search { grid-column: 1 / 3; grid-row: 1; }
    #c-layout { grid-column: 3; grid-row: 1; }
    #c-new-folder { grid-column: 1; grid-row: 2; }
    .c-upload-wrap { grid-column: 2 / 4; grid-row: 2; }
    .c-upload-wrap .c-btn { width: 100%; }
    .c-upload-menu { left: 0; right: 0; }
    .c-upload-menu button { padding: 14px 16px; font-size: 14px; }
    body[data-view="trash"] .c-tools { grid-template-columns: 1fr 38px; }
    body[data-view="trash"] #c-layout { grid-column: 2; }

    /* search hits: show the folder under the name */
    .c-in { display: block; }
    .c-row.is-uploading .c-sub { display: none; }

    /* selection bar docked to the bottom edge, equal-width actions */
    .c-selbar {
        left: 0; right: 0; bottom: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        box-shadow: none;
        border-top: 4px solid var(--bg);
    }
    #c-selcount { grid-column: 1; grid-row: 1; align-self: center; max-width: none; }
    .c-selclear { grid-column: 2; grid-row: 1; padding: 6px 12px; }
    .c-selbar-actions { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
    .c-selbar-actions button { padding: 11px 4px; text-align: center; }
    .c-sel-long { display: none; }
    .c-sel-short { display: inline; }
    body.has-selection .c-uploads { bottom: 118px; }

    /* grid: three columns */
    body[data-layout="grid"] .c-rows { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; padding: 12px; }
    body[data-layout="grid"] .c-row { padding: 14px 4px 10px; }

    /* uploads panel: compact when collapsed */
    .c-uploads { max-height: 60vh; }
}

/* ⋯ menu as a bottom sheet on touch screens */
.c-menu.is-sheet {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    min-width: 0;
    border-width: 4px 0 0;
    box-shadow: none;
    padding: 4px 0 calc(8px + env(safe-area-inset-bottom));
}
.c-menu.is-sheet .c-menu-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 2px solid var(--line);
    font-family: var(--wide);
    font-variation-settings: "wdth" 115, "wght" 750;
    font-size: 15px;
    min-width: 0;
}
.c-menu.is-sheet .c-menu-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-menu.is-sheet button { padding: 15px 20px; font-size: 16px; }
.c-menu.is-sheet kbd { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .c-menu.is-sheet { animation: c-sheet-in 240ms var(--ease-out); }
    .c-sheet-backdrop { animation: c-fade-in 200ms var(--ease-out); }
}
@keyframes c-sheet-in { from { transform: translateY(100%); } }

.c-btn:disabled { opacity: .35; cursor: not-allowed; }
.c-picker-hint { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
    .c-uploads[data-closing] { animation: c-sink-out 160ms var(--ease-out) forwards; }
}

/* destructive actions read as such in the phone action sheet */
.c-menu.is-sheet button.is-danger { color: var(--danger); }