/* Hashmark website (phase 3) - This week in the mockups' look: docs/design/app-a-c-screens.html, screen "This week".
   Website only: every rule starts with html[data-site] (siteui.css has the frame and the shared tokens).
   The markup is weekpages.js siteWeekOverviewHtml (the hero, one card a day, the side cards); renderOffWeek keeps the
   app's markup and gets the same card look here. */
@media screen {
html[data-site][data-ui="a"] #weekovTab { padding: 0; }
html[data-site][data-ui="a"] #weekovTab .wk-ov { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; max-width: none; align-items: start; }
html[data-site][data-ui="a"] #weekovTab .wk-main,
html[data-site][data-ui="a"] #weekovTab .wk-side { gap: 12px; }
html[data-site][data-ui="a"] #weekovTab .cardbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; margin: 0; }

/* the shared bits: eyebrow, big numbers, rows, tags */
html[data-site][data-ui="a"] #weekovTab .wkx-eyb,
html[data-site][data-ui="a"] #weekovTab .wk-ov:not(.wkx) .cardbox > h3 { font: 700 12px/1.3 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
html[data-site][data-ui="a"] #weekovTab .wkx-num { font: 800 28px/1 var(--s-hf); letter-spacing: 0; color: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .wkx-rw { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
html[data-site][data-ui="a"] #weekovTab .wkx-r { font: 500 13px/1.35 var(--s-mono); text-align: right; min-width: 0; overflow-wrap: anywhere; }
html[data-site][data-ui="a"] #weekovTab .wkx-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--soft-2); color: var(--muted); min-width: 22px; text-align: center; }
html[data-site][data-ui="a"] #weekovTab .wkx-tag.bad { background: #fbe7e2; color: #a3260f; }
html[data-site][data-ui="a"][data-theme="dark"] #weekovTab .wkx-tag.bad { background: #2e1914; color: #ff9c8a; }
html[data-site][data-ui="a"] #weekovTab .wkx-p { margin: 0 0 10px; font-size: 13.5px; }
html[data-site][data-ui="a"] #weekovTab .wkx-card { padding: 20px; }
html[data-site][data-ui="a"] #weekovTab .wkx-card > button.small,
html[data-site][data-ui="a"] #weekovTab .wkx-card .toolbar-row { margin-top: 10px; }
html[data-site][data-ui="a"] #weekovTab button.small { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: var(--rb); }
html[data-site][data-ui="a"] #weekovTab button.small:not(.primary) { background: var(--panel); color: var(--ink); border-color: var(--line); }
html[data-site][data-ui="a"][data-theme="dark"] #weekovTab button.small:not(.primary) { box-shadow: none; }

/* the hero: the game, how much is done, the next step */
html[data-site][data-ui="a"] #weekovTab .wkx-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; }
html[data-site][data-ui="a"] #weekovTab .wkx-hero .wkx-eyb { margin: 0; }
html[data-site][data-ui="a"] #weekovTab .wkx-vs { display: flex; gap: 14px; align-items: center; margin-top: 10px; min-width: 0; }
html[data-site][data-ui="a"] #weekovTab .wkx-crest { width: 44px; height: 44px; border-radius: 10px; background: #7a1f1f; color: #fff; font: 800 18px/1 var(--s-hf); display: grid; place-items: center; flex: none; }
html[data-site][data-ui="a"] #weekovTab .wkx-h1 { font: 800 40px/1 var(--s-hf); text-transform: uppercase; letter-spacing: 0; margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
html[data-site][data-ui="a"] #weekovTab .wkx-score { display: flex; gap: 10px; align-items: baseline; margin-top: 16px; flex-wrap: wrap; font-size: 14.5px; }
html[data-site][data-ui="a"] #weekovTab .wkx-prog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 12px; }
html[data-site][data-ui="a"] #weekovTab .wkx-prog i { height: 6px; border-radius: 2px; background: var(--soft-2); }
html[data-site][data-ui="a"] #weekovTab .wkx-prog i.on { background: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .wkx-hb { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
html[data-site][data-ui="a"] #weekovTab .wkx-hb button.primary { min-height: 40px; padding: 9px 15px; font-size: 14px; }

/* the checklist: one card a day */
html[data-site][data-ui="a"] #weekovTab .wkx-day { padding: 16px 20px; }
html[data-site][data-ui="a"] #weekovTab .wkx-day h4 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html[data-site][data-ui="a"] #weekovTab .wkx-dn { font: 800 22px/1 var(--s-hf); letter-spacing: 0; color: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .wkx-task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
html[data-site][data-ui="a"] #weekovTab .wkx-day h4 + .wkx-task, html[data-site][data-ui="a"] #weekovTab .wkx-task:first-child { border-top: 0; }
html[data-site][data-ui="a"] #weekovTab .wkx-tl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-site][data-ui="a"] #weekovTab .wkx-tl b { font-weight: 600; font-size: 15px; color: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .wkx-tl small { color: var(--muted); font-size: 13px; }
html[data-site][data-ui="a"] #weekovTab .wkx-tl small.wk-stale { color: var(--err, #a3260f); }
html[data-site][data-ui="a"] #weekovTab .wkx-task.dn .wkx-tl b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--s-mu2); }
html[data-site][data-ui="a"] #weekovTab .wkx-task > button:not(.gw-box) { margin-left: auto; flex: none; }

/* the boxes: 20px, a soft square; done = ink with a check in the page color */
html[data-site][data-ui="a"] #weekovTab .gw-box { width: 20px; height: 20px; min-height: 0; padding: 0; margin-top: 1px; border: 1.5px solid var(--s-mu2); border-radius: 5px; background: transparent; box-shadow: none; display: grid; place-items: center; flex: none; }
html[data-site][data-ui="a"] #weekovTab button.gw-box:hover { border-color: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .gw-box.done { background: var(--ink); border-color: var(--ink); }
html[data-site][data-ui="a"] #weekovTab .gw-box.stale { border-color: var(--err, #e5341c); background: transparent; }
html[data-site][data-ui="a"] #weekovTab .gw-box svg { width: 13px; height: 13px; }
html[data-site][data-ui="a"] #weekovTab .gw-box svg path { stroke: var(--bg); stroke-width: 2.4; }
html[data-site][data-ui="a"] #weekovTab .gw-box.gw-auto:not(.done):not(.stale) { border-style: dashed; }
html[data-site][data-ui="a"] #weekovTab .wk-key { border: 0; margin: 2px 0 0; padding: 0 4px; font-size: 12.5px; color: var(--muted); gap: 18px; }
html[data-site][data-ui="a"] #weekovTab .wk-key .gw-box { width: 14px !important; height: 14px !important; border-width: 1.5px; border-radius: 4px; margin: 0; }

/* the side cards: the game's fields, the week tools as quiet buttons */
html[data-site][data-ui="a"] #weekovTab .wk-edit { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; margin: 0; }
html[data-site][data-ui="a"] #weekovTab .wk-edit label { font-size: 12.5px; font-weight: 600; color: var(--muted); gap: 4px; }
html[data-site][data-ui="a"] #weekovTab .wk-edit input { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rb); padding: 7px 10px; font-size: 14px; }
html[data-site][data-ui="a"] #weekovTab .toolbar-row { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-site][data-ui="a"] #weekovTab #gwStripOv .gw-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
html[data-site][data-ui="a"] #weekovTab #gwStripOv .gw-strip > :not(button) { display: none; }
html[data-site][data-ui="a"] #weekovTab .wkx-big { display: flex; gap: 16px; align-items: baseline; }
html[data-site][data-ui="a"] #weekovTab .wkx-big .wkx-num { font-size: 40px; }
html[data-site][data-ui="a"] #weekovTab .wkx-bar { height: 6px; background: var(--soft-2); border-radius: 3px; overflow: hidden; margin: 10px 0 12px; }
html[data-site][data-ui="a"] #weekovTab .wkx-bar i { display: block; height: 100%; background: var(--ink); }

/* an offseason week: the app's markup, the same cards */
html[data-site][data-ui="a"] #weekovTab .wk-ov:not(.wkx) .cardbox { padding: 20px; }
html[data-site][data-ui="a"] #weekovTab .wk-ov:not(.wkx) .wk-edit { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
  html[data-site][data-ui="a"] #weekovTab .wk-ov { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  html[data-site][data-ui="a"] #weekovTab .wkx-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  html[data-site][data-ui="a"] #weekovTab .wkx-hb { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  html[data-site][data-ui="a"] #weekovTab .wkx-h1 { font-size: 30px; }
  html[data-site][data-ui="a"] #weekovTab .wkx-task { flex-wrap: wrap; }
  html[data-site][data-ui="a"] #weekovTab .wkx-tl { flex-basis: calc(100% - 40px); }
  html[data-site][data-ui="a"] #weekovTab .wkx-task > button:not(.gw-box) { margin-left: 32px; }
  html[data-site][data-ui="a"] #weekovTab .wkx-day { padding: 14px 16px; }
}
}
@media screen {
html[data-site][data-ui="a"] #weekovTab .wkx-opt { font-size: 11.5px; font-weight: 700; padding: 2px 8px; margin-left: 6px; border-radius: 99px; background: var(--soft-2); color: var(--muted); vertical-align: 2px; text-decoration: none; display: inline-block; }
}