/* ══════════ the week ══════════
   The feed at /internal#/posts. Everything here is drawn by posts.js and
   themed off the console's own tokens, so it follows light, dark and fomo
   without knowing which one is on. */

/* ---------- the standing rule ---------- */
.po-rule{display:flex;align-items:center;gap:9px;margin:0;padding:10px 13px;
  border-radius:var(--r-m);border:1px solid var(--violet-soft);
  background:var(--violet-soft);color:var(--text);font-size:12.5px;line-height:1.4}
.po-rule svg{width:15px;height:15px;flex:none;color:var(--violet-hi)}
.po-rule b{font-weight:600}

/* ---------- writing one ---------- */
.po-write .panel-b{display:flex;flex-direction:column;gap:10px}
.po-who{display:flex;flex-wrap:wrap;gap:6px}
.po-me{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 5px;
  border-radius:99px;border:1px solid var(--line-2);color:var(--muted);font-size:12.5px;
  transition:background .12s,color .12s,border-color .12s}
.po-me .av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:9.5px;font-weight:600;color:#0C0C0E;flex:none}
.po-me:hover{color:var(--text);background:var(--raise)}
.po-me.on{color:var(--text);border-color:var(--violet);background:var(--violet-soft);font-weight:500}

#po-body{width:100%;resize:vertical;min-height:70px;padding:10px 12px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font:inherit;font-size:13px;line-height:1.5}
#po-body::placeholder{color:var(--muted-2)}
#po-body:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}

.po-shots{display:flex;flex-wrap:wrap;gap:8px}
.po-shot{position:relative;width:76px;height:76px;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line-2);background:var(--raise)}
.po-shot img{width:100%;height:100%;object-fit:cover;display:block}
.po-drop{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;
  background:rgba(8,8,12,.72);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center}
.po-drop:hover{background:rgba(8,8,12,.92)}

.po-write-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.po-write-foot .push{flex:1}
#po-pick-l{cursor:pointer}
#po-pick-l.off{opacity:.45;pointer-events:none}

/* ---------- the feed ---------- */
#po-feed{display:grid;gap:18px}
.po-week{display:grid;gap:8px}
.po-week-h{display:flex;align-items:center;gap:10px}
.po-week-h>i{flex:1;height:1px;background:var(--line);min-width:12px}
.po-week-h .hint{flex:none}

.po-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);
  padding:12px 14px;display:grid;gap:9px}
.po-head{display:flex;align-items:center;gap:8px}
.po-head .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:#0C0C0E;flex:none}
.po-head b{font-size:13px;font-weight:600}
.po-when{font-size:11.5px;color:var(--muted-2);margin-left:auto}
.po-x{width:22px;height:22px;flex:none;border-radius:6px;display:grid;place-items:center;
  color:var(--muted-2);opacity:0;transition:opacity .12s,background .12s,color .12s}
.po-x svg{width:13px;height:13px}
.po-card:hover .po-x,.po-x:focus-visible{opacity:1}
.po-x:hover{background:var(--t-red-bg);color:var(--t-red-fg)}

.po-body{font-size:13px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.po-body a{color:var(--violet-hi);text-decoration:underline;text-underline-offset:2px}
.po-body a:hover{text-decoration-thickness:2px}

/* One photo runs the width of the note; several share the row. Capped in
   height either way, so a tall screenshot cannot push the next note off
   the bottom of the page. */
.po-shots-out{display:grid;gap:7px;grid-template-columns:1fr}
.po-shots-out.many{grid-template-columns:1fr 1fr}
/* The box has to have a height before the picture arrives. An <img> with
   no height attribute is zero pixels tall until it loads, which also meant
   a lazy one was never in view to start loading — so it is not lazy, and
   the frame holds its place. */
.po-photo{display:block;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);background:var(--raise);line-height:0;min-height:150px}
.po-photo img{display:block;width:100%;max-height:360px;object-fit:cover;
  transition:transform .18s}
.po-shots-out.many .po-photo img{height:180px;max-height:none}
.po-photo:hover img{transform:scale(1.015)}
/* a photo that fell back to its link sizes to the words, not the column */
.po-shots-out .po-tile{justify-self:start}
@media (prefers-reduced-motion:reduce){
  .po-photo img,.po-photo:hover img{transition:none;transform:none}
}

.po-grid{display:flex;flex-wrap:wrap;gap:7px}
.po-tile{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;
  border-radius:99px;border:1px solid var(--t-blue-bd);background:var(--t-blue-bg);
  color:var(--t-blue-fg);font-size:11.5px;white-space:nowrap}
.po-tile svg{width:14px;height:14px;flex:none}
.po-tile:hover{filter:brightness(1.12)}

@media(max-width:700px){
  .po-when{margin-left:auto}
  .po-shot{width:64px;height:64px}
  .po-shots-out.many{grid-template-columns:1fr}
  .po-shots-out.many .po-photo img{height:auto;max-height:300px}
}

/* A continuous timeline with an avatar gutter, compact author line and media. */
[data-view="posts"] .scroller.pad{width:100%;padding:0;gap:0!important}
[data-view="posts"] .scroller.pad>*{width:min(100%,740px);margin:0 auto}
[data-view="posts"] .po-rule{border-radius:0;border:0;border-bottom:1px solid var(--line);padding:12px 20px;font-size:12px}
.po-write{border-radius:0;border-width:0 1px 1px;background:var(--surface)}
.po-write .panel-h{padding:20px 22px 0}
.po-write .panel-h h2{font-size:17px}
.po-write .panel-b{padding:14px 22px 18px;gap:12px}
#po-body{border:0;border-radius:0;background:transparent;padding:8px 0;min-height:82px;font-size:18px;line-height:1.5;resize:vertical}
#po-body:focus{box-shadow:none}
.po-write-foot{border-top:1px solid var(--line);padding-top:12px}
#po-send{border-radius:99px;padding:0 24px;min-height:36px;font-weight:650}
#po-pick-l{color:var(--violet-hi);border:0;padding-left:0}
#po-feed,.po-week{display:block;gap:0}
.po-week-h{padding:14px 20px;background:var(--surface-2);border:1px solid var(--line);border-top:0}
.po-week-h .lbl{text-transform:none;letter-spacing:0;font-size:12px}
.po-card{position:relative;border-radius:0;border-width:0 1px 1px;padding:18px 22px 14px 76px;gap:10px;transition:background .15s}
.po-card:hover{background:var(--raise)}
.po-head{gap:6px;min-height:22px;flex-wrap:wrap}
.po-head .av{position:absolute;left:20px;top:19px;width:40px;height:40px;font-size:17px}
.po-head b{font-size:14px}
.po-author{color:var(--text);text-decoration:none}
.po-author:hover{text-decoration:underline}
.po-handle,.po-dot,.po-when{color:var(--muted-2);font-size:12px}
.po-when{margin-left:0}
.po-x{margin-left:auto;opacity:.55}
.po-body{font-size:15px;line-height:1.6}
.po-shots-out{border-radius:14px;overflow:hidden;gap:3px;border:1px solid var(--line)}
.po-photo{border:0;border-radius:0}
.po-actions{display:flex;align-items:center;justify-content:space-between;padding-top:5px;gap:12px;font-size:11.5px;color:var(--muted-2)}
.po-actions a,.po-actions button{color:inherit;text-decoration:none}
.po-actions a:hover,.po-actions button:hover{color:var(--violet-hi)}
.po-highlight{box-shadow:inset 3px 0 var(--violet)}
@media(max-width:600px){.po-card{padding:15px 14px 14px 62px}.po-head .av{left:14px;top:16px;width:34px;height:34px;font-size:14px}.po-handle{display:none}.po-body{font-size:14px}.po-write .panel-b{padding:12px 16px}.po-write .panel-h{padding:16px 16px 0}}

/* ---------- tagging somebody ---------- */

/* A name in a note reads as part of the sentence, not as a chip: the same
   violet the links use, no background, so "shot the reel with @bijan" still
   scans as a line of writing. */
.po-tag{color:var(--violet-hi);text-decoration:none;font-weight:550}
.po-tag:hover{text-decoration:underline;text-underline-offset:2px}

/* The menu that opens on @. Absolutely placed under whichever box is being
   typed in — posts.js sets the offsets — so it never moves the words down
   the page as it appears. */
.po-write .panel-b,.po-edit{position:relative}
.po-at{position:absolute;z-index:40;min-width:190px;max-height:216px;overflow:auto;
  padding:4px;border-radius:var(--r-m);border:1px solid var(--line-2);
  background:var(--surface);box-shadow:0 10px 26px rgba(8,8,12,.22);
  display:grid;gap:1px}
.po-at-i{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;
  border-radius:7px;color:var(--text);font-size:13px;text-align:left}
.po-at-i .av{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:600;color:#0C0C0E;flex:none}
.po-at-i:hover,.po-at-i.on{background:var(--violet-soft)}

/* ---------- fixing one ---------- */

.po-edited{font-size:12px;color:var(--muted-2)}
.po-pen{width:22px;height:22px;flex:none;margin-left:auto;border-radius:6px;
  display:grid;place-items:center;color:var(--muted-2);opacity:.55;
  transition:opacity .12s,background .12s,color .12s}
.po-pen svg{width:13px;height:13px}
.po-pen:hover{background:var(--violet-soft);color:var(--violet-hi);opacity:1}
.po-card:hover .po-pen,.po-pen:focus-visible{opacity:1}
/* the pencil takes the gutter the × used to, and they sit together */
.po-card .po-pen+.po-x{margin-left:0}

.po-editing{background:var(--raise)}
.po-edit{display:grid;gap:10px}
.po-edit-b{width:100%;min-height:90px;resize:vertical;padding:10px 12px;
  border-radius:var(--r-m);border:1px solid var(--line-2);background:var(--surface);
  color:var(--text);font:inherit;font-size:15px;line-height:1.6}
.po-edit-b:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.po-edit-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.po-edit-foot .push{flex:1}
.po-edit-foot .hint{font-size:11.5px}
.po-edit-foot .btn-p{border-radius:99px;padding:0 18px;min-height:32px}

@media(max-width:600px){
  .po-edit-foot .hint{width:100%}
  .po-at{min-width:0;left:0!important;right:0}
}