/* F26 layouts — news list, activity, timeline, deck link, stats.
   Recovered verbatim 16 Sep 2026 from the original interactive build (see
   js/dashboard-f26.js for provenance). The f26-article / f26-panel rules the
   news DETAIL page needs already live in dashboard-extensions.css; these are
   the list, activity and deck rules that were missing. */

/* Tracking, client links and news use the dashboard's four existing palettes. */
.flow26{max-width:1120px;display:grid;gap:22px}
.flow26 h2{font-size:19px;letter-spacing:-.025em;font-weight:650;margin:0}
.flow26 h3{font-size:14px;font-weight:650;margin:0}
.flow26 p{line-height:1.6}
.f26-muted{color:var(--ink-3);font-size:12px}
.f26-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.f26-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f26-actions a{text-decoration:none}
.f26-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:600;background:var(--card-2);color:var(--ink-2);white-space:nowrap}
.f26-badge.hot{background:var(--sig-bg);color:var(--sig);border:1px solid color-mix(in srgb,var(--sig) 25%,transparent)}
.f26-badge.hot:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.f26-panel{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:23px;min-width:0}
.f26-stat{padding:20px 22px;display:grid;gap:4px}
.f26-stat+.f26-stat{border-left:1px solid var(--line)}
.f26-stat strong{font-size:26px;letter-spacing:-.04em;font-weight:650;line-height:1.3}
.f26-stat span{font-size:11px;color:var(--ink-3)}
@keyframes f26-bar-in{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
.f26-draft{display:block;width:100%;resize:vertical;min-height:165px;padding:15px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-family:inherit;font-size:12.5px;line-height:1.75;margin:17px 0 13px}
.f26-draft-note{font-size:11.5px;color:var(--ink-2);margin-top:8px}
.f26-event{display:grid;grid-template-columns:81px 15px minmax(0,1fr) auto;gap:11px;padding:12px 0;font-size:12px;position:relative}
.f26-event time{color:var(--ink-3);font-size:10.5px;padding-top:2px}
.f26-event i{width:7px;height:7px;border-radius:50%;background:var(--sig);margin-top:6px;position:relative}
.f26-event:not(:last-child) i:after{content:'';position:absolute;top:13px;left:3px;width:1px;height:36px;background:var(--line)}
.f26-event b{display:block;font-weight:600}
.f26-event small{display:block;margin-top:3px;font-size:11px;color:var(--ink-3)}
.f26-event>span:last-child{color:var(--ink-3);font-size:11px}
.f26-disclosure{padding-top:12px;border-top:1px solid var(--line);margin-top:12px}
.f26-disclosure summary{display:flex;gap:10px;padding:10px 0;font-size:12px;color:var(--ink-2);cursor:pointer}
.f26-activity-list{display:grid;gap:10px}
.f26-activity{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:11px;text-align:left;width:100%}
.f26-activity:hover{border-color:var(--line-2);background:var(--card-2)}
.f26-activity.hot{border-left:3px solid var(--sig)}
.f26-activity b{font-size:14px;font-weight:650}
.f26-activity p{font-size:12px;color:var(--ink-2);margin:4px 0}
.f26-activity small{font-size:11px;color:var(--ink-3)}


.f26-publisher{width:39px;height:43px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:6px;font:500 12px Georgia,serif;color:var(--ink-2)}
.f26-news-title{font-size:17px;line-height:1.4;letter-spacing:-.025em;font-weight:650;text-align:left;display:block;margin:8px 0}
.f26-news-title:hover{color:var(--sig)}
.f26-news-source{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10.5px;color:var(--ink-3)}
.f26-field{display:grid;gap:7px;margin-top:15px;font-size:12px;color:var(--ink-2)}
.f26-field input,.f26-field textarea,.f26-field select{width:100%;padding:11px 12px;background:var(--card-2);color:var(--ink);border:1px solid var(--line-2);border-radius:7px;font:inherit;min-width:0}
.f26-field textarea{min-height:112px;resize:vertical;line-height:1.65}
.f26-error{font-size:12px;color:var(--ink);padding:10px 0}
@media(max-width:800px){.f26-stat{padding:15px}.f26-stat strong{font-size:22px}.f26-activity{gap:10px;padding:15px}.f26-event{grid-template-columns:62px 10px minmax(0,1fr);gap:8px}.f26-event>span:last-child{grid-column:3}.f26-panel{padding:18px}}
@media(max-width:480px){.f26-stat:nth-child(3){border-left:0;border-top:1px solid var(--line)}.f26-stat:nth-child(4){border-top:1px solid var(--line)}.flow26{gap:17px}}


/* Publisher marks (js/dashboard-logos.js). The slot is the same one the
   initials used, so a source with no artwork is unchanged. A mark is
   contained rather than cropped - a wordmark cropped to a circle is
   unreadable - and the chip loses its tinted background when it holds one,
   so the mark sits on white as its owner intends. */
html[data-basis-motion] .f26-publisher.has-mark,
.f26-publisher.has-mark {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .10);
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.f26-publisher.has-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* In the detail header the mark sits inline with the source name. */

/* --- Activity detail: one summary surface, not chips floating on the page ground.
   (Owner: "it's info stacking on one another".) ---------------------------- */

/* --- News cards (owner: "news page should have a card") ------------------- */












/* --- Activity cover: last activity, and the return when there was one ----- */
.f26-activity{grid-template-columns:minmax(0,1fr) auto auto;gap:18px;padding:18px 20px}
.f26-activity-who{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:14px;min-width:0}
.f26-activity-when{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.f26-activity-when b{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.f26-activity .arw{color:var(--ink-3)}
/* Bookings in Activity (owner ruling, 12 Oct 2026): the link row's frame, a ruled badge, and a
   client's cancellation struck and red as on the Microsite list (owner ruling, 11 Oct 2026). */
.f26-booking{color:inherit;text-decoration:none}
.f26-booking .f26-badge{border:1px solid var(--line-2)}
.f26-booking .f26-badge.hot{border-color:var(--sig)}
.f26-booking.is-cancelled{--f26-off:#af3a30}
html[data-theme=dark] .f26-booking.is-cancelled,html[data-theme=nature-dark] .f26-booking.is-cancelled{--f26-off:#ec9a8b}
.f26-booking.is-cancelled .f26-badge{border-color:var(--f26-off);color:var(--f26-off);background:transparent}
.f26-booking.is-cancelled .f26-activity-when s{color:var(--f26-off)}
/* a visitor's question (owner ruling r139, 15 Oct 2026): the booking row's frame, a div holding its button */
.f26-question{grid-template-columns:minmax(0,1fr) auto auto}
.f26-question .f26-activity-who{align-items:flex-start;min-width:0}
.f26-question .f26-q-text{font-size:13px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.f26-question:not(.hot) .f26-q-text{color:var(--ink-2)}
.f26-question small a{color:inherit;text-decoration:underline}
.f26-question .f26-badge{border:1px solid var(--line-2)}
.f26-question .f26-badge.hot{border-color:var(--sig)}
/* The Microsite tab's dot while a booking is new to her: the hot badge's dot, no count. */
.f26-tab-dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--sig);vertical-align:middle}
/* A tab with no filter (Microsite) keeps its count on the right, where the Decks tab has it. */
.f26-topline-right:only-child{margin-left:auto}
@media(max-width:700px){
  .f26-activity{grid-template-columns:minmax(0,1fr) auto}
  .f26-activity-when{grid-column:1/-1;justify-content:flex-start}
  
}

/* === News: a feed of real cards ==========================================
   One article per row, the publisher's mark shown large, a headline at
   reading size, and the two actions as buttons rather than words. */
.f26-news-feed{display:grid;gap:9px}
.f26-news-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px;align-items:start}
.f26-news-card:hover{border-color:var(--line-2)}
.f26-news-visual{display:grid;place-items:center;align-self:center;width:76px;height:76px;background:var(--card-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.f26-news-visual .f26-publisher{width:100%;height:100%;min-width:0;border:0;border-radius:0;background:transparent;font:500 15px Georgia,serif}
.f26-news-visual .f26-publisher.has-mark{padding:11px;border:0;border-radius:0}
.f26-news-visual .f26-publisher img{width:100%;height:100%;object-fit:contain;object-position:center}
.f26-news-body{display:grid;gap:6px;min-width:0}
.f26-news-card .f26-news-source{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}
.f26-news-card .f26-news-source b{font-weight:650}
.f26-news-card .f26-news-source span{color:var(--ink-3)}
.f26-news-card .f26-news-title{text-align:left;font-size:16px;line-height:1.35;font-weight:650;letter-spacing:-.02em}
.f26-news-card .f26-news-title:hover{color:var(--sig)}
.f26-news-card p{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:0;max-width:78ch}
.f26-news-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}

/* Filters read as pressable at rest, not only once chosen. */
/* The section rows in an activity detail are choices - give them an edge. */
@media(max-width:700px){
  .f26-news-card{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px}
  .f26-news-visual{height:56px}
  .f26-news-card .f26-news-title{font-size:15px}
}

.f26-news-foot .ghost{padding:6px 11px;font-size:12px}

/* --- v57: sections, and the second axis on Activity ---------------------
   A feed with no breaks gives the eye nothing to scan by, and a client who
   is looking at three flats deserves three headings rather than one pile. */
.f26-news-day{display:grid;gap:9px}
.f26-news-day + .f26-news-day{margin-top:22px}
.f26-news-day > h2{margin:0;font:600 11px/1 inherit;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:2px}
.f26-news-day-items{display:grid;gap:9px}

.f26-topline-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}


/* A disabled filter is a count of zero, not a broken control. */

/* ---- News article v3, to the owner's comp (owner ruling, 10 Oct 2026 (comp)): the headline with
   one meta line, then two cards, Summary and Message. Every card, box and control is drawn with a
   clear edge (owner ruling: borders and contrast up, no borderless pill floating on tint). ---- */
#view .f26-news-card .f26-badge,#view .nw2 .f26-badge{border:1px solid var(--card-edge,var(--line-2));color:var(--ink)}
#view .nw2{display:grid;gap:18px;max-width:1280px;margin:8px 0 48px;container:nw2 / inline-size}
#view .nw2 .ad83-back{margin:0}
#view .nw2 .p71-icon{width:16px;height:16px;flex:none}
#view .nw2-head{display:grid;gap:12px}
#view .nw2-title{margin:0;font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
#view .nw2-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:15px;color:var(--ink-2)}
#view .nw2-meta b{font-weight:550;color:var(--ink)}
#view .nw2-dot{color:var(--ink-3)}
#view .nw2-src{display:inline-flex;align-items:center;gap:10px}
#view .nw2-meta a{color:var(--sig);text-decoration:underline;text-underline-offset:3px}
#view .nw2-mark{display:grid;place-items:center;width:42px;height:42px;flex:none;overflow:hidden;margin-right:4px;border:1px solid var(--card-edge,var(--line-2));border-radius:8px;background:var(--card)}
#view .nw2-mark .f26-publisher{width:100%;height:100%;min-width:0;border:0;border-radius:0;background:transparent;font-size:13px}
#view .nw2-mark .f26-publisher.has-mark{padding:5px}
#view .nw2-mark img{width:100%;height:100%;object-fit:contain}
#view .nw2-input{display:flex;align-items:center;gap:8px;flex:0 1 320px;min-width:200px;height:36px;padding:0 12px;border:1.5px solid var(--card-edge,var(--line-2));border-radius:8px;background:var(--card);color:var(--ink-3)}
#view .nw2-input:focus-within{border-color:var(--sig)}
#view .nw2-input input{flex:1;min-width:0;height:100%;padding:0;border:0!important;outline:0;box-shadow:none!important;background:transparent!important;font:inherit;font-size:13.5px;color:var(--ink)}
#view .nw2-error{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
#view .nw2-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:16px;align-items:stretch}
#view .nw2-card{display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px 22px 22px}
#view .nw2-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
#view .nw2-card-head h2{margin:0;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
#view .nw2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:8px;font-weight:600;white-space:nowrap}
#view .nw2-btn:disabled{opacity:.45;cursor:not-allowed}
#view .nw2-quiet{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
#view .nw2-quiet .p71-icon{width:18px;height:18px}
#view .nw2-quiet:hover{background:var(--card-2)}
#view .nw2-quiet:disabled{opacity:.55;cursor:progress}
#view .nw2-box{position:relative;border:1.5px solid var(--card-edge,var(--line-2));border-radius:10px;background:var(--card)}
#view .nw2-box:focus-within{border-color:var(--ink-2)}
#view .nw2-summary-card .nw2-edit,#view .nw2-paste{flex:1;display:flex;flex-direction:column}
#view .nw2-summary-card .nw2-edit{min-height:340px}
#view .nw2-sum{flex:1;padding:44px 26px 24px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:17px;line-height:1.75;color:var(--ink);outline:0;cursor:text}
#view .nw2-sum b{font-weight:700}
#view .nw2-sum:empty::before{content:attr(data-placeholder);color:var(--ink-3)}
#view .nw2-pencil{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-2);cursor:pointer}
#view .nw2-pencil:hover{background:var(--card-2);color:var(--ink)}
#view .nw2-pencil .p71-icon{width:18px;height:18px}
#view .nw2-paste{gap:12px}
#view .nw2-paste textarea{flex:1;width:100%;min-height:280px;padding:14px 16px;font:inherit;font-size:14px;line-height:1.55;color:var(--ink);resize:vertical;outline:0}
#view .nw2-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 24px}
#view .nw2-field{display:grid;gap:8px;min-width:0}
#view .nw2-label{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
#view .nw2-drop{position:relative}
#view .nw2-select{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1.5px solid var(--card-edge,var(--line-2));border-radius:8px;background:var(--card);font-size:15px;color:var(--ink);cursor:pointer;list-style:none}
#view .nw2-select::-webkit-details-marker{display:none}
#view .nw2-select::after,#view .nw2-select::before{content:none!important;display:none!important}
#view .nw2-select>span:not(.mono):not(.nw2-glyph){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view .nw2-select>.p71-icon:last-child{margin-left:auto;transition:transform .15s}
#view .nw2-drop[open]>.nw2-select{border-color:var(--ink-2)}
#view .nw2-drop[open]>.nw2-select>.p71-icon:last-child{transform:rotate(180deg)}
#view .nw2-menu,#view .nw2-list{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;display:grid;max-height:360px;overflow:auto;border:1.5px solid var(--card-edge,var(--line-2));border-radius:10px;background:var(--card);box-shadow:0 12px 28px rgba(20,32,26,.14)}
#view .nw2-menu{padding:6px}
#view .nw2-group{padding:10px 10px 4px;font-size:12px;font-weight:600;color:var(--ink-3)}
#view .nw2-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:14px;color:var(--ink);cursor:pointer}
#view .nw2-opt:hover{background:var(--card-2)}
#view .nw2-opt small{margin-left:auto;color:var(--ink-3)}
#view .nw2-opt:has(input:disabled){opacity:.45;cursor:not-allowed}
#view .nw2-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:0;border-top:1px solid var(--card-edge,var(--line-2));border-radius:0;background:transparent;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
#view .nw2-row:first-child{border-top:0}
#view .nw2-row:hover{background:var(--card-2)}
#view .nw2-row[aria-pressed="true"]{background:color-mix(in srgb,var(--sig) 9%,var(--card))}
#view .nw2-who{display:grid;flex:1;gap:2px;min-width:0}
#view .nw2-who b{font-size:14px;font-weight:550}
#view .nw2-who small{font-size:12px;color:var(--ink-3)}
#view .nw2-tick{display:inline-flex;color:var(--sig)}
#view .nw2-glyph{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;color:var(--ink-2)}
#view .nw2-glyph .p71-icon{width:20px;height:20px}
#view .nw2-list .nw2-glyph{width:34px;height:34px}
#view .nw2 .mono{width:30px;height:30px;flex:none;border:1px solid var(--card-edge,var(--line-2))}
#view .nw2-list .mono{width:34px;height:34px}
#view .nw2-none{margin:0;padding:12px 14px;border-top:1px solid var(--card-edge,var(--line-2));font-size:13px;color:var(--ink-3)}
#view .nw2-msg .nw2-edit{flex:1;display:flex}
#view .nw2-draft{flex:1;width:100%;min-height:250px;field-sizing:content;margin:0;padding:18px 48px 18px 18px;border:0!important;border-radius:10px;outline:0;box-shadow:none!important;background:transparent!important;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);resize:vertical}
#view .nw2-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
#view .nw2-actions .ghost.nw2-btn{border:1.5px solid var(--card-edge,var(--line-2));background:var(--card);color:var(--ink)}
#view .nw2-actions .ghost.nw2-btn:hover{border-color:var(--ink-2)}
#view .nw2-paste .nw2-actions{justify-content:flex-start}
/* Container queries, not media queries: the interface-scale zoom (dashboard-extensions.js) rescales
   media widths, so the page measures its own width instead. */
@container nw2 (max-width:760px){#view .nw2-grid{grid-template-columns:1fr}#view .nw2-summary-card .nw2-edit{min-height:0}#view .nw2-title{font-size:26px}}
@container nw2 (max-width:520px){#view .nw2-dot{display:none}#view .nw2-meta,#view .nw2-src{column-gap:14px}#view .nw2-card{padding:16px}#view .nw2-sum{padding:40px 18px 18px;font-size:16px}#view .nw2-actions .nw2-btn{flex:1 1 auto}#view .nw2-card-head .nw2-btn{padding:0 14px}}
/* BUG-7: on a phone the question's button sits on its own line under the row, inside the card (the shared mobile row has only two columns). */
@media(max-width:700px){
  #view .f26-question>.ghost{grid-column:1;grid-row:3;justify-self:start}
}