/* ---------- AI Content Control ---------- AI-CONTENT-CONTROL.md, Mark's ruling 2026-09-03. Three things live here and they are three because they are seen in three places: the ROOM (the shelf and the form, in Admin Control), the CHIP (under Ann's words, in every room she stands in), and the POPUP (over whatever room the chip was pressed in). HOUSE FACE, NO MONO. Every size is a --t-* step and every colour is a token, so nothing here branches on a theme name and the day a theme is added this sheet needs no edit. */ /* ================================ THE ROOM ================================ */ .hd-room{display:flex;flex-direction:column;gap:18px;padding:22px 24px 40px;max-width:1080px;} .hd-head{display:flex;flex-direction:column;gap:6px;} .hd-title{font-size:var(--t-room);font-weight:var(--w-bold);letter-spacing:var(--ls-head);} .hd-sub{font-size:var(--t-small);color:var(--muted);line-height:var(--lh-body);max-width:70ch;} /* A shelf that has not been read yet and a shelf with nothing on it both land here, saying different things (public/rooms/handouts.js). */ .hd-empty{padding:22px;border:var(--bd) dashed var(--edge);border-radius:var(--r-md); color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body);} /* ---------- the shelf ---------- A grid rather than a , so the columns hold their proportions while the whole thing reflows on a narrow window. The five tracks are the four things a row is plus the press that removes it, and the two long ones take the slack, because a trigger list and a when-note are the fields that actually vary in length. REMOVE HAS TO STAY INSIDE THE EDGE (2026-09-03, Mark's Chrome walk of AI Content Control). The three text tracks were minmax(160px,1.2fr) and two minmax(140px,1fr), which are FLOORS: a grid track never goes under its minimum, so once the four floors plus the Kind column, the Remove column, the four gaps and the padding came to more than the centre column had, the row simply grew wider than the room and pushed Remove off the right edge. It could only be reached by scrolling the page sideways, which is not something a person hunting a delete press thinks to try. Two things fix it and both are needed. The floor on each long track becomes 0 (minmax(0,1.2fr) and minmax(0,1fr)), so the track may shrink under its own content, and the cells in them are told to WRAP AND BREAK, because a track with no floor still cannot shrink past a word its content refuses to break. Together they let the whole row fold down to Kind plus Remove plus the scraps between, at any width the centre column takes. AND THE LAST RESORT IS THE TABLE'S OWN SCROLLBAR, not the page's. Below the narrow step the row is given a floor again, and .hd-table scrolls inside itself, so the sideways drag is on the shelf and the room around it holds still. That is the difference between a wide table and a broken room. */ .hd-table{display:flex;flex-direction:column;border:var(--bd) solid var(--edge); border-radius:var(--r-md);overflow:hidden;background:var(--panel);} .hd-row{display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto; gap:14px;align-items:baseline;padding:11px 14px;border-top:var(--bd) solid var(--edge); font-size:var(--t-small);line-height:var(--lh-body);} .hd-row:first-child{border-top:none;} .hd-head-row{background:var(--sel);font-size:var(--t-label);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--muted);font-weight:var(--w-semi);} /* THE LONG CELLS WRAP AND BREAK. A track with a zero floor still cannot go under the widest unbreakable thing inside it, and a trigger list pasted in as one comma-run with no spaces is exactly that. min-width:0 releases the grid item's own automatic minimum, overflow-wrap breaks the run. */ .hd-c-title,.hd-c-trig,.hd-c-note{min-width:0;overflow-wrap:anywhere;} /* The title press is a button, and a button does not wrap unless it is told to: left alone it holds the title on one line and takes the track back out past the edge, which is the same fault wearing a different hat. */ .hd-c-title .hd-open{white-space:normal;overflow-wrap:anywhere;} /* REMOVE NEVER SHRINKS AND NEVER WRAPS. It is the fixed thing every other track gives way to, so its own width is its content's and the word stays on one line at every width the room takes. */ .hd-c-go{text-align:right;min-width:0;} .hd-c-go .hd-remove{white-space:nowrap;} /* PAST THIS THE ROW CANNOT FOLD FURTHER AND STAY READABLE, so the shelf takes its own scrollbar rather than handing one to the page. The floors come back only here, and only inside a box that can scroll them. */ @media (max-width:640px){ .hd-table{overflow-x:auto;} .hd-row{grid-template-columns:70px minmax(150px,1.2fr) minmax(120px,1fr) minmax(120px,1fr) auto; min-width:600px;} } /* A field a person left empty says so quietly rather than leaving a hole: a blank cell reads as a bug and "no note" reads as a decision. */ .hd-none{color:var(--muted);opacity:.75;} /* The screen reader gets a column name the eye does not need, because the Remove column's header would be a word over a row of identical presses. */ .hd-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* THE TITLE IS THE PRESS, because opening a handout the way Ann's chip would is the one thing worth doing to a row from here: it is how Mark checks that what he put on the shelf is what he meant to put there. */ .hd-open{padding:0;border:none;background:none;color:var(--accent);font:inherit; font-size:var(--t-small);text-align:left;cursor:pointer;} .hd-open:hover{color:var(--ink);text-decoration:underline;} .hd-remove{padding:3px 9px;border:var(--bd) solid var(--edge);border-radius:var(--r-pill); background:none;color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer;} .hd-remove:hover:not(:disabled){color:var(--ink);border-color:var(--accent-line);background:var(--sel);} .hd-remove:disabled{opacity:.5;cursor:default;} /* ---------- the form ---------- One column, because every field on it is a full line of typing and a two-column form would put the trigger words beside the title where they read as a caption of it. */ .hd-form{display:flex;flex-direction:column;gap:12px;padding:18px; border:var(--bd) solid var(--edge);border-radius:var(--r-md);background:var(--panel);max-width:640px;} .hd-form-head{font-size:var(--t-sub);font-weight:var(--w-semi);} .hd-pills{display:flex;gap:8px;} .hd-pill{padding:5px 14px;border:var(--bd) solid var(--edge);border-radius:var(--r-pill); background:none;color:var(--muted);font:inherit;font-size:var(--t-tiny);cursor:pointer;} .hd-pill:hover{color:var(--ink);border-color:var(--accent-line);} .hd-pill-on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);} .hd-field{display:flex;flex-direction:column;gap:5px;} .hd-label{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--muted);font-weight:var(--w-semi);} .hd-input{padding:8px 11px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm); background:var(--inset);color:var(--text);font:inherit;font-size:var(--t-body);} .hd-input:focus{outline:none;border-color:var(--accent);} .hd-input::placeholder{color:var(--muted);opacity:.8;} .hd-file{display:flex;align-items:center;gap:10px;} .hd-choose{padding:7px 14px;border:var(--bd) solid var(--edge);border-radius:var(--r-sm); background:none;color:var(--ink);font:inherit;font-size:var(--t-small);cursor:pointer;} .hd-choose:hover:not(:disabled){border-color:var(--accent-line);background:var(--sel);} .hd-choose:disabled{opacity:.5;cursor:default;} .hd-filename{font-size:var(--t-small);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* The real input is hidden and the visible press clicks it, because a native file input cannot be dressed and this one has to look like the house. */ .hd-hidden-file{display:none;} .hd-form-go{display:flex;justify-content:flex-end;padding-top:2px;} .hd-add{padding:8px 18px;border:var(--bd) solid var(--accent);border-radius:var(--r-sm); background:var(--accent-soft);color:var(--accent);font:inherit;font-size:var(--t-small); font-weight:var(--w-semi);cursor:pointer;} .hd-add:hover:not(:disabled){background:var(--accent);color:var(--onAccent);} .hd-add:disabled{opacity:.5;cursor:default;} /* ================================ THE CHIP ================================ Under her words in the thread, beside the Dig and Next chips and following their manner: small, quiet, one press. It is wider than they are because it carries a picture and a title rather than a single word, and that is the whole of what makes it a handout rather than another chip. */ .house-ann-handout{display:flex;align-items:center;gap:9px;width:100%;margin-top:6px;padding:6px; border:var(--bd) solid var(--edge);border-radius:var(--r-md);background:var(--sel); color:var(--ink);font:inherit;text-align:left;cursor:pointer;} .house-ann-handout:hover{border-color:var(--accent-line);background:var(--accent-soft);} /* THE VIDEO'S OWN THUMBNAIL, from img.youtube.com and nothing else (public/_headers). 16 by 9 at a size that reads as a picture in a 200px panel without taking the panel over. */ .hd-chip-shot{position:relative;flex:0 0 auto;width:72px;height:41px;border-radius:var(--r-sm); overflow:hidden;background:var(--inset);} .hd-chip-shot img{width:100%;height:100%;object-fit:cover;display:block;} /* The play badge says PLAY without a word, over the corner of the picture so it never sits on a face. */ .hd-chip-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--mark);background:var(--art-veil);} /* A PDF AND A LINK HAVE NO PICTURE OF THEMSELVES, so they wear a glyph in a box the same height as the thumbnail: the chips line up in the thread whatever kind they are. */ .hd-chip-glyph{flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:41px;height:41px;border-radius:var(--r-sm);background:var(--inset);color:var(--muted);} .hd-chip-lines{display:flex;flex-direction:column;gap:1px;min-width:0;} .hd-chip-kind{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--muted);font-weight:var(--w-semi);} /* Two lines and then it stops. A title that ran to four lines would turn the chip into a paragraph with a picture on it. */ .hd-chip-title{font-size:var(--t-tiny);line-height:var(--lh-tight);color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* =============================== THE POPUP =============================== A floating window under the modal law: .modal-scrim and .panel-float come from components.css and do the scrim and the drag; only the size and the frame inside it are this sheet's business. */ .hd-win{width:min(880px,92vw);max-height:88vh;} .hd-win-head{display:flex;align-items:center;gap:12px;padding:12px 14px; border-bottom:var(--bd) solid var(--edge);} .hd-win-title{flex:1;min-width:0;font-size:var(--t-sub);font-weight:var(--w-semi); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hd-win-body{flex:1;min-height:0;display:flex;background:var(--inset);} /* A VIDEO IS 16 BY 9 AND A PDF IS A PAGE, so the two want different room. The video keeps its ratio at any width, which is what stops the black bars; the PDF gets a tall box, because a document read in a letterbox is a document nobody reads. */ .hd-win-video{aspect-ratio:16/9;} .hd-win-body:not(.hd-win-video){height:72vh;} .hd-frame{flex:1;width:100%;border:none;display:block;}