/* Today on Trilly (G12c): /today and /today/{date}. Ported from the community mockups' today.html, in the site's tokens. Loaded
   only on /today (Operations/AreaStyles.cs). Every class starts td- so nothing here can meet a rule in site.css. */

/* the header: date and arrows, the day's counts, the clock */
.td-page{padding-bottom:clamp(40px,6vw,72px)}
/* The closing ask under the board, for visitors (the design sweep, batch 2): the board's own bottom space is the gap. */
.td-closing{padding-top:0}
.td-top{padding:18px 0 18px}
.td-top-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 30px;flex-wrap:wrap}
.td-date{display:flex;align-items:center;gap:14px;min-width:0}
.td-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);background:var(--white);flex:none;text-decoration:none}
.td-arrow .ui-ico{width:18px;height:18px}
.td-back .ui-ico{transform:rotate(180deg)}
.td-off{opacity:.4}
.td-date h1{font-size:var(--h1);line-height:1}
.td-kick{font-size:var(--h2);margin-bottom:4px}
.td-sub{font-size:var(--fs-small);color:var(--soft);margin-top:8px}
.td-sub a{color:var(--navy);font-weight:500}
.td-pulse{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.td-pz{background:var(--cream);border-radius:18px;padding:10px 16px;min-width:120px}
.td-pz b{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1.05;letter-spacing:-.02em}
.td-pz span{font-size:var(--fs-small);color:var(--soft)}
.td-clock{background:var(--navy);color:var(--white)}
.td-clock span{color:var(--on-navy-soft)}

/* the layout: the board (or a shelf) beside the rail */
.td-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:36px;margin-top:22px;align-items:start}
.td-main>*{min-width:0}
/* With nothing beside the board but the makers' link, the board takes the width and the link sits under it (calm batch G, #190:
   a quiet day's three cards ran two across beside an empty 350 px rail). */
.td-main:not(:has(.td-rcard)){grid-template-columns:minmax(0,1fr)}
.td-bhead{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}
.td-bhead h2{font-size:var(--h2)}
.td-bhead p{font-size:var(--fs-small);color:var(--soft);margin-top:4px;max-width:60ch}
.td-seg{display:inline-flex;background:var(--mist);border-radius:999px;padding:4px;flex:none}
.td-seg a{padding:6px 14px;border-radius:999px;font-size:var(--fs-small);font-weight:500;color:var(--soft);text-decoration:none;min-height:36px;display:inline-flex;align-items:center}
.td-seg a.is-on{background:var(--white);color:var(--navy);box-shadow:0 1px 3px rgba(13,44,84,.18)}
.td-msg{font-size:var(--fs-body);color:var(--bad);font-weight:500}
.td-msg:empty{display:none}
.td-floor{font-size:var(--fs-small);color:var(--soft);margin:-4px 0 16px}
.td-floor b{color:var(--navy);font-weight:600}

/* the board */
.td-board{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.td-row{display:grid;grid-template-columns:28px 64px minmax(0,1fr) auto 76px;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:22px;background:var(--white)}
.td-first{border-color:var(--navy);box-shadow:var(--shadow)}
.td-rk{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--soft);text-align:center}
.td-first .td-rk{color:var(--navy)}
.td-tile{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;flex:none}
.td-tile svg{width:38px;height:38px}
.td-tile-sm{width:44px;height:44px;border-radius:14px}
.td-tile-sm svg{width:26px;height:26px}
.td-tile-xs{width:36px;height:36px;border-radius:11px}
.td-tile-xs svg{width:22px;height:22px}
.td-body h3{font-size:var(--fs-body);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.td-name{color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.td-name:hover{text-decoration:underline}
.td-pr{color:var(--soft);font-size:var(--fs-small);margin-top:3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.td-meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--soft)}
.td-by{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:500}
.td-by a{color:var(--navy);text-decoration:none}
.td-role{color:var(--soft)}
.td-dot{width:3px;height:3px;border-radius:50%;background:var(--field);display:inline-block}
.td-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-family:var(--body);font-size:var(--fs-small);font-weight:500;line-height:1.5;white-space:nowrap;color:var(--navy);background:var(--mist)}
.td-chip-launch{background:var(--apricot);color:var(--navy)}
.td-chip-maker{background:var(--marigold);color:var(--navy)}
.td-cmt{display:inline-flex;flex-direction:column;align-items:center;gap:2px;color:var(--soft);font-size:var(--fs-small);font-weight:500;min-width:44px;text-decoration:none}
.td-cmt .ui-ico{width:18px;height:18px}
.avatar.td-av-xs{width:26px;height:26px;font-size:.75rem}   /* initials at 12 px, the sheet's floor */
.avatar.td-av-sm{width:28px;height:28px;font-size:.7rem}
.avatar.td-av-md{width:44px;height:44px}

/* the up-vote: big on the board, small in the Trilly team's box */
.td-voteform{margin:0}
.td-bigvote{display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:80px;border:1px solid var(--line);border-radius:20px;background:var(--white);font-weight:600;font-size:var(--fs-body);color:var(--navy);gap:2px;text-decoration:none}
.td-bigvote .ui-ico{width:20px;height:20px}
.td-bigvote small{font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.td-bigvote[aria-pressed="true"]{border-color:var(--navy);background:var(--marigold)}
.td-bigvote[aria-pressed="true"] small{color:var(--navy)}
.td-vote-h{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-weight:600;font-size:var(--fs-small);color:var(--navy);text-decoration:none}
.td-vote-h .ui-ico{width:15px;height:15px}
.td-vote-h[aria-pressed="true"]{border-color:var(--navy);background:var(--cream)}
.td-static{cursor:default}
.td-count:empty{display:none}

.td-more{display:flex;justify-content:center;margin-top:12px}
.td-empty{border:1px solid var(--line);border-radius:var(--r);padding:22px;color:var(--soft)}
.td-empty b{color:var(--navy)}
/* An empty board shows this week's newest skills under one line (the calm site's fix 11). */
.td-empty-line{margin:0 0 14px;color:var(--soft)}
.td-row.td-fresh-row{grid-template-columns:64px minmax(0,1fr)}   /* a quiet day's new skills: no rank, no vote */
.td-empty-line b{color:var(--navy)}
.td-after{margin-top:14px;font-size:var(--fs-small)}

/* Trilly's own skills: their own box, never ranked */
.td-house{margin-top:22px;border:1px solid var(--line);border-radius:24px;padding:18px 20px;background:var(--white)}
.td-house-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.td-house-h h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.td-house-h .logo-mark{width:26px;height:26px}
.td-house-h p{font-size:var(--fs-small);color:var(--soft)}
.td-house-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.td-house-h+.td-house-row{margin-top:10px}   /* the box's first row only, never the first in its fold (the review, L7) */
.td-house-more>summary{padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-small);font-weight:600;cursor:pointer}   /* the rest of Trilly's own launches, folded (the design-b2-9b review, M4) */
.td-house-row b{font-size:var(--fs-small);font-weight:600}
.td-s{display:block;font-size:var(--fs-small);color:var(--soft);line-height:1.4}

/* yesterday's board, when today is quiet */
.td-yesterday{margin-top:22px}
/* An empty past day shows the nearest board in its place, at the top (design-b2's review). */
.td-nearest{margin-top:4px}
/* A quiet day's picture of the board (design-b2's review): the board's own rows on a tinted field, tagged Example, with the
   up-vote button's shape (no count: nobody voted). */
.td-example{margin:0;padding:18px 18px 16px;border-radius:var(--r-lg);background:var(--ice)}
.td-example .td-board{margin:10px 0 0}
.td-example-tag{display:inline-flex;margin:0;padding:4px 12px;border-radius:999px;background:var(--white);font-size:var(--fs-small);font-weight:500;color:var(--navy)}
.td-example-line{margin-top:10px;font-size:var(--fs-body);color:var(--soft)}
.td-vote-look{display:grid;place-items:center;width:44px;height:36px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--navy)}
.td-vote-look .ui-ico{width:15px;height:15px}
.td-example .td-row.td-fresh-row{grid-template-columns:28px 64px minmax(0,1fr) 76px}
.td-example .td-vote-look{justify-self:end}
.td-yesterday h3{font-size:var(--fs-body);margin-bottom:6px}
.td-mini{list-style:none;margin:0 0 10px;padding:0}
.td-mini li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}

/* the launch-day card (the live part is G12b's: _LaunchLive) */
.td-ld{margin-top:28px;background:var(--navy);border-radius:var(--r-lg);color:var(--white);overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr}
.td-ld-l{padding:28px 28px 26px}
.td-ld-kick{color:var(--marigold);font-size:var(--h2)}
.td-livepill{display:inline-flex;align-items:center;gap:8px;background:var(--marigold);color:var(--navy);font-weight:600;font-size:var(--fs-small);border-radius:999px;padding:4px 12px 4px 10px}
.td-livepill i{width:8px;height:8px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px rgba(13,44,84,.2)}
.td-ld-l h3{color:var(--white);font-size:var(--h2);margin:14px 0 8px;line-height:1.15}
.td-ld-l p{color:var(--on-navy-soft);font-size:var(--fs-small)}
.td-who{display:flex;align-items:center;gap:10px;min-width:0;margin-top:16px}
.td-who-name{font-weight:600;font-size:var(--fs-small);color:var(--white)}
.td-who-meta{font-size:var(--fs-small);color:var(--on-navy-soft)}
.td-btns{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.td-btn-ghost{border-color:rgba(255,255,255,.55);background:transparent;color:var(--white)}
.td-ld-r{background:var(--white);color:var(--ink);margin:10px;border-radius:22px;padding:6px 18px 12px;align-self:start}
.td-ld-none{padding:14px 0 6px;font-size:var(--fs-small);color:var(--soft)}
.td-c-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.td-c-row:first-child{border-top:0}
.td-c-mk{background:var(--cream);margin:0 -10px;padding:12px 10px;border-radius:14px;border-top:0}
.td-c-row p a{color:var(--ink);text-decoration:none}
.td-who-line{font-size:var(--fs-small)}
.td-ld-r .td-who-meta{color:var(--soft)}
.td-ask{display:flex;gap:8px;align-items:center;border:2px solid var(--field);border-radius:999px;padding:6px 6px 6px 16px;margin-top:8px;color:var(--soft);font-size:var(--fs-small);text-decoration:none}
.td-ask span:first-child{flex:1}

/* the rail */
.td-rail{display:grid;gap:16px;align-content:start}
.td-rcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.td-rcard h3{display:flex;align-items:center;gap:9px;font-size:var(--fs-body)}
.td-rcard h3 svg{width:24px;height:24px;flex:none}
.td-rsub{font-size:var(--fs-small);color:var(--soft);margin:3px 0 6px}
/* For makers, one link under the rail (the calm site's fix 11): the navy button lives on /for-creators. */
.td-rlaunch{font-size:var(--fs-small)}
.td-rlink{display:inline-block;margin-top:10px;font-size:var(--fs-small)}
.td-list{list-style:none;margin:0;padding:0}
.td-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.td-li b{display:block;font-size:var(--fs-small);font-weight:500;line-height:1.35}
.td-li .td-s{font-size:var(--fs-small)}
.td-li-text{grid-template-columns:minmax(0,1fr)}
.td-list .td-li{grid-template-columns:auto auto minmax(0,1fr)}
.td-list .td-li-text{grid-template-columns:minmax(0,1fr)}
.td-n{font-size:var(--fs-small)}
.td-medal{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--navy);position:relative;flex:none;border:2.4px solid var(--navy);isolation:isolate;margin-top:8px}
.td-medal::before,.td-medal::after{content:"";position:absolute;top:-12px;width:9px;height:11px;z-index:-1}
.td-medal::before{left:9px;transform:skewX(18deg);background:var(--navy)}
.td-medal::after{right:9px;transform:skewX(-18deg);background:var(--navy-2)}
.td-m1{background:var(--marigold)}
.td-m2{background:var(--mist)}
.td-m3{background:var(--apricot-soft)}
.td-top3 .td-li{grid-template-columns:40px minmax(0,1fr) auto;padding:14px 0}
.td-lb .td-li{grid-template-columns:22px 36px minmax(0,1fr) auto}
.td-lb .td-rk{font-size:var(--fs-body)}
.td-up .td-li{grid-template-columns:36px minmax(0,1fr) auto}
.td-when{font-size:var(--fs-small);font-weight:600;background:var(--cream);border-radius:9px;padding:2px 7px;color:var(--navy);margin-right:4px}
.td-remind{margin:0}
.td-btn-xs{padding:5px 12px;font-size:var(--fs-small);border-width:1.5px;min-height:36px}

/* shelves */
.td-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(240px,(100% - 36px) / 3)),1fr));gap:18px}   /* three across at most */
.td-pick{display:flex;flex-direction:column;gap:10px}
.td-pick-why{font-size:var(--fs-small);color:var(--ink);background:var(--cream);border-radius:var(--r-sm);padding:10px 14px}
.td-pick-why .badge{margin-right:6px}

@media (max-width:900px){
  .td-main{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:600px){
  .td-top{padding:10px 0 10px}
  .td-date{gap:10px}
  .td-date h1{font-size:var(--h2)}
  .td-arrow{width:44px;height:44px}
  .td-pulse{gap:8px;width:100%}
  .td-pz{min-width:0;flex:1;padding:8px 10px}
  .td-pz b{font-size:var(--h3)}
  .td-pz span{font-size:var(--fs-small)}
  .td-clock{display:none}
  .td-bhead{flex-direction:column;align-items:flex-start;gap:10px}
  .td-bhead h2{font-size:var(--h2)}
  .td-row{grid-template-columns:44px minmax(0,1fr) 60px;gap:12px;padding:12px}
  .td-row .td-rk,.td-row .td-cmt{display:none}
  .td-example .td-row.td-fresh-row{grid-template-columns:44px minmax(0,1fr) 52px}
  .td-example{padding:14px 12px 12px}
  .td-row.td-fresh-row{grid-template-columns:44px minmax(0,1fr)}
  .td-fresh-row .td-pr{display:none}   /* a phone's quiet-day row: the name and who made it (words a screen, #190) */
  .td-row .td-tile{width:44px;height:44px;border-radius:14px}
  .td-row .td-tile svg{width:26px;height:26px}
  .td-body h3{font-size:var(--fs-body)}
  .td-pr{font-size:var(--fs-small);-webkit-line-clamp:2}
  .td-hide-m{display:none}
  .td-bigvote{width:60px;height:66px;font-size:var(--fs-body);border-radius:16px}
  .td-bigvote small{display:none}
  .td-ld{grid-template-columns:minmax(0,1fr)}
  .td-ld-l{padding:22px 20px}
  .td-house-row{grid-template-columns:40px minmax(0,1fr) auto}
  .td-house-row .td-s{display:none}   /* on a phone Trilly's own row is its name, a link, and the up-vote: the quiet-day state fits the card budget (the lead's ruling) */
  .td-nearest .td-s{display:none}   /* the nearest board's makers' names are on its own page: a phone's first screen is the three names and the link */
}