/* Doodldroppr chrome. Tokens and components from BRAND.md / Doodlpix design-system.md. */
:root{
  --paper:#fbfaf7; --ink:#111; --coral:#fc8b8c; --marigold:#fdbd30; --sky:#68b4fd;
  --grey:#8a8a8a; --rule:#e6e3dc; --input-border:#d9d5cc; --sheet:#fff; --band:#F9C3C3;
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:12px; --spacing-lg:16px; --spacing-xl:24px; --spacing-2xl:40px; --spacing-3xl:48px;
  --radius-tile:6px; --radius-card:8px; --radius-bubble:18px; --radius-pill:999px;
  --sans:"Space Mono",ui-monospace,Menlo,monospace;            /* alias kept for old rules; everything is mono */
  --mono:"Space Mono",ui-monospace,Menlo,monospace;            /* the interface */
  --brush:"Caveat Brush","Marker Felt",cursive;
  --hand:"Covered By Your Grace","Bradley Hand",cursive;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.4 var(--mono)}
p.long,.long{font-family:var(--sans)}
a{color:inherit}
[hidden]{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:22px;height:96px;padding:0 48px;background:rgba(251,250,247,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.top .logo{height:56px;display:block}
.top nav{display:flex;gap:28px;font-size:14px}
.top nav a{text-decoration:none;color:var(--grey)}
.top nav a.on{color:var(--ink);font-weight:700}
.top .spacer{flex:1}
.top .crumb{color:var(--grey);text-decoration:none;font-size:14px}
.top .crumb.sep{margin:0 2px}
.top .title{font-family:var(--hand);font-size:26px;line-height:1}
.avatar{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);color:var(--ink);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.6);transform-origin:50% 40%;display:block}

/* chip */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);font-size:12px;color:var(--grey)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:#d9d6ce}
.chip.live .dot{background:var(--marigold)}
.chip.live{color:var(--ink)}

/* buttons, inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1.5px solid var(--ink);border-radius:999px;background:var(--sheet);color:var(--ink);font:700 14px/1 var(--mono);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--ink);color:#fff}
.btn.sm{height:36px;padding:0 16px;font-size:13px}
.btn:disabled{opacity:.4;cursor:default}
.field{height:48px;padding:0 22px;border:1px solid var(--input-border);border-radius:999px;background:var(--sheet);font:14px var(--mono);color:var(--ink);outline:none;width:100%}
.field::placeholder{color:#9a9a9a}
.field:focus{border-color:#bdb8ad}

/* type */
.band{display:inline-block;position:relative;font-family:var(--brush);text-transform:uppercase;line-height:1;padding:.08em .35em .12em;isolation:isolate}
.band::before{content:"";position:absolute;inset:.12em -.25em -.1em -.15em;background:var(--coral);opacity:.9;transform:skewY(-1.4deg) translateY(.06em);z-index:-1}
.hand{font-family:var(--hand)}
.brush{font-family:var(--brush);text-transform:uppercase}
.label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.meta{font-size:13px;color:var(--grey)}
.dood-says{display:flex;align-items:center;gap:18px;font-family:var(--hand);font-size:28px;color:var(--ink)}
.dood-says img{height:56px}

/* tiles */
.tile{position:relative;width:300px;aspect-ratio:1;background:var(--sheet);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);overflow:hidden;transform:rotate(var(--tilt,0deg))}
.tile img{width:100%;height:100%;display:block}
/* arrival: draw-on (reveal 1). the sheet is scribbled in by a zigzag pen, then fill and shadow settle (tiles and murals) */
.tile.new{background:none;box-shadow:none;animation:tileshadow .3s ease-out 1s forwards}
.new .sheet{width:100%;height:100%;background:#fff;border-radius:var(--radius-tile)}
.new .sheet img{width:100%;height:100%;display:block}
.new .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.3,0,.7,1) .1s forwards}
.new .fill{opacity:0;animation:fillon .15s linear 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillon{to{opacity:1}}
@keyframes tileshadow{to{box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05)}}
.tile.pending{background:#f3f1ec;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:14px}
.tile.pending::after{content:"";position:absolute;top:0;bottom:0;left:40%;width:2px;background:var(--sky);opacity:.7;animation:think 1.6s ease-in-out infinite alternate}
@keyframes think{from{left:12%}to{left:88%}}
.tile.pending .h{font-size:28px}
.tile.pending .s{font-family:var(--hand);font-size:20px;color:#333}
.tile.pending .z{font-family:var(--hand);font-size:16px;color:var(--grey);position:absolute;bottom:22px}

/* cards for calls */
.calls{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.call{display:block;text-decoration:none;color:inherit}
.call .thumb{aspect-ratio:16/10;background:#f3f1ec;border-radius:6px;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05);transform:rotate(var(--tilt,0deg))}
.call .thumb img{position:absolute;inset:12% 22%;width:56%;height:76%;object-fit:cover;background:#fff;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.call .thumb img.wide{inset:0;width:100%;height:100%;border-radius:6px;box-shadow:none}
.call h3{font-family:var(--hand);font-weight:400;font-size:24px;margin:14px 0 4px;line-height:1.1}

/* misc */
.sheet{background:var(--sheet);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.dashed{border:1.5px dashed #d9d6ce}
.steps{display:flex;gap:26px;justify-content:center;font-size:14px;color:var(--grey)}
.steps span{display:inline-flex;align-items:center;gap:8px}
.steps span::before{content:"";width:9px;height:9px;border-radius:50%;background:#d9d6ce}
.steps span.done::before,.steps span.now::before{background:var(--marigold)}
.steps span.done,.steps span.now{color:var(--ink)}
.heard{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:18px 20px;overflow:auto}
.heard .who{color:var(--sky);font-size:12px;font-weight:700;margin:12px 0 2px}
.heard .who:first-child{margin-top:0}
.heard p{margin:0;font:14px/1.4 var(--sans)}
.modal-bg{position:fixed;inset:0;background:rgba(17,17,17,.45);display:flex;align-items:center;justify-content:center;z-index:20}
.modal{width:min(520px,92vw);background:var(--sheet);border-radius:10px;padding:28px 28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
@media (max-width:760px){.top{height:auto;padding:12px 16px;flex-wrap:wrap;gap:12px}.top .logo{height:44px}}

/* avatar menu */
.avwrap{position:relative;display:inline-block}
.avwrap .menu{position:absolute;right:0;top:46px;width:260px;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:6px 0;transform:rotate(-.5deg);z-index:9;display:flex;flex-direction:column}
.avwrap .menu[hidden]{display:none}
.avwrap .row{display:block;padding:9px 16px;font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
.avwrap .row.grey{color:var(--grey)}
.avwrap .row.bold{font-weight:700}
.avwrap .hr{height:1px;background:var(--rule);margin:4px 0}
/* dood speaking in a bubble */
.bubble{display:flex;align-items:center;gap:14px;justify-content:center}
.bubble img{height:44px}
.bubble span{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:10px 18px;font-family:var(--hand);font-size:22px}
/* to-do panel */
.todo{background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.todo .head{display:flex;gap:8px;align-items:baseline;margin-bottom:10px}
.todo .head .hand{color:var(--grey);font-size:18px}
.todo .item{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.todo .item input{appearance:none;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;flex:none;margin:6px 0 0;cursor:pointer;position:relative}
.todo .item input:checked{background:var(--ink)}
.todo .item input:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.todo .item .t{font-family:var(--hand);font-size:22px;line-height:1.1}
.todo .item.done .t{text-decoration:line-through;color:var(--grey)}
.todo .item .w{font-size:12px;color:var(--sky);margin-top:4px}
.todo .foot{font:12px/1.5 var(--sans);color:var(--grey);margin:12px 0 10px}
.todo .empty{font-family:var(--hand);font-size:20px;color:var(--grey);padding:8px 0}
/* topic clusters */
.clusters{position:relative;display:flex;flex-wrap:wrap;gap:44px 60px;align-content:flex-start}
.cluster{position:relative;display:flex;flex-direction:column;gap:14px;max-width:640px}
.cluster .band{font-size:30px;align-self:flex-start}
.cluster .row{display:flex;flex-wrap:wrap;gap:22px 18px}
.cluster .tile{width:186px}
.cluster .tile.pending .h{font-size:20px}
.cluster .tile.pending .s{font-size:16px}
.cluster .tile.pending .z{font-size:13px;bottom:14px}
.arrows{position:absolute;inset:0;pointer-events:none;overflow:visible}