/* ============================================================
   board.css — My Board (Time › My Board)
   Clean, minimalist "page on a board": warm paper on a faint dot
   grid, handwritten Caveat headings over Kalam body, no card
   outlines — space and hand-drawn underlines separate the parts.
   Colours follow styles.css (BestLifeEver tokens).
   ============================================================ */

@font-face { font-family: 'Caveat'; font-weight: 500; font-display: swap; src: url('fonts/caveat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url('fonts/caveat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url('fonts/caveat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-weight: 300; font-display: swap; src: url('fonts/kalam-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-weight: 400; font-display: swap; src: url('fonts/kalam-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-weight: 700; font-display: swap; src: url('fonts/kalam-latin-700-normal.woff2') format('woff2'); }

/* The board brings its own big "My board" header — hide the plain Time title
   (the sub-menu stays so you can move between Time pages). */
#view-time.board-open .view__titlerow,
#view-time.board-open .view__subtitle { display: none; }

#sub-board { padding: 0; }

.board, .board * { box-sizing: border-box; }
.board {
  font-family: 'Kalam', cursive;
  color: #23201b;
  background-color: #fbf9f4;
  background-image: radial-gradient(#e4ddd1 1px, transparent 1.2px);
  background-size: 24px 24px;
  border-radius: 6px;
  min-height: 100%;
}
.board-wrap { max-width: 1360px; margin: 0 auto; padding: 48px 32px 96px; display: flex; flex-direction: column; gap: 56px; }
.board-hand { font-family: 'Caveat', cursive; }
.board-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board button { font-family: inherit; }

.board .c-mind  { --c: #a85338; --t: #f8e9e3; }
.board .c-todo  { --c: #23201b; --t: #efebe3; }
.board .c-goal  { --c: #2c6342; --t: #e6f0e8; }
.board .c-event, .board .c-date { --c: #2f5d8a; --t: #e6eef7; }
.board .c-appt  { --c: #6b4a86; --t: #efe8f5; }
.board .ink { color: var(--c); }
.board-squig { display: block; color: var(--c, #a85338); opacity: .8; }
.board-lbl { font-size: 13px; color: #6f6a60; letter-spacing: .02em; }
.board-muted { margin: 0; font-size: 15px; color: #6f6a60; }

/* header */
.board-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.board-header__l { display: flex; flex-direction: column; gap: 4px; }
.board-h1 { margin: 0; font-size: 72px; font-weight: 700; line-height: .95; color: #23201b; }
.board-h2 { margin: 0; font-size: 60px; font-weight: 700; line-height: 1; }
.board-h3 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.05; }
.board-tagline { margin: 6px 0 0; font-size: 18px; color: #6f6a60; font-weight: 300; }
.board-header__stats { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.board-stat { display: flex; flex-direction: column; }
.board-stat b { font-family: 'Caveat', cursive; font-weight: 700; font-size: 64px; line-height: 1; }

/* buttons */
.board-btn { min-height: 40px; padding: 0 16px; border-radius: 6px; border: 0; background: #efebe3; font-size: 15px; color: #23201b; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .15s, color .15s; }
.board-btn:hover { background: #e7e2d8; }
.board-btn:disabled { opacity: .55; cursor: default; }
.board-btn--accent { background: #c2634a; color: #fff; }
.board-btn--accent:hover { background: #a85338; }
.board-btn--ghost { background: transparent; color: #a85338; padding: 0 8px; }
.board-btn--ghost:hover { background: #f8e9e3; }
.board-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* focus strip */
.board-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.board-focus__head { display: flex; align-items: center; gap: 10px; color: #a85338; }
.board-focus__head .board-hand { font-size: 28px; font-weight: 600; }
.board-focus__chip { width: auto !important; align-items: baseline !important; }
.board-focus__n { font-size: 22px; font-weight: 700; }

/* columns */
.board-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 40px 24px; }
.board-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.board-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.board-col__name { margin: 0; font-size: 34px; font-weight: 700; line-height: 1; }
.board-col__count { font-size: 26px; color: #8b8478; }
.board-list { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9d1c4 transparent; }
.board-row { display: flex; align-items: flex-start; gap: 2px; border-radius: 6px; transition: background .15s; }
.board-row:hover, .board-row.is-sel { background: var(--t); }
.board-item { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 0; background: transparent; padding: 9px 6px 9px 8px; font-size: 17px; line-height: 1.3; color: #23201b; cursor: pointer; border-radius: 6px; }
.board-row.is-sel .board-item { color: var(--c); }
.board-item__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.board-item__meta { font-size: 12.5px; color: #6f6a60; font-weight: 300; }
.board-dot, .board-mark { flex: none; margin-top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--c); }
.board-dot.is-planned, .board-mark.is-planned { background: var(--c); }
.board-x { flex: none; width: 32px; height: 38px; border: 0; background: transparent; color: #8b8478; cursor: pointer; border-radius: 6px; display: grid; place-items: center; padding: 0; opacity: .5; transition: opacity .15s; }
.board-row:hover .board-x, .board-x:focus-visible { opacity: 1; }
.board-x:hover { color: #a85338; }
.board-addform { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.board-add { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px dashed #cfc7b8; background: transparent; font: inherit; font-size: 16px; padding: 8px 4px; color: #23201b; }
.board-add::placeholder { color: #8b8478; }
.board-add:focus { outline: none; border-bottom-color: var(--c); border-bottom-style: solid; }
.board-plus { width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--c); cursor: pointer; display: grid; place-items: center; }
.board-plus:hover { background: var(--t); }

/* detail sheet */
.board-sheet { background: rgba(255, 253, 250, .92); border-radius: 6px; padding: 36px 36px 40px; scroll-margin-top: 16px; }
.board-empty { margin: 0; font-size: 32px; color: #8b8478; text-align: center; padding: 40px 0; }
.board-detail { display: flex; flex-direction: column; gap: 36px; }
.board-detail__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.board-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c); }
.board-detail__top { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.board-detail__fields { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.board-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.board-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 40px; }
.board-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; }
.board-in { width: 100%; border: 0; border-bottom: 1.5px solid #e2dbcf; background: transparent; font: inherit; font-size: 17px; padding: 6px 2px; color: #23201b; border-radius: 0; }
.board-in:focus { outline: none; border-bottom-color: #c2634a; }
textarea.board-lined { resize: vertical; min-height: 84px; line-height: 28px; background-image: linear-gradient(transparent 27px, #efeae1 27px); background-size: 100% 28px; border-bottom: 0; padding: 0 2px; }
.board-title-in { font-family: 'Caveat', cursive; font-size: 44px; font-weight: 700; line-height: 1.1; border-bottom: 0; padding: 0; }
.board-prios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.board-pill { min-height: 38px; padding: 0 14px; border-radius: 6px; border: 0; background: transparent; font-size: 15px; color: #6f6a60; cursor: pointer; }
.board-pill:hover { background: #efebe3; }
.board-pill.is-on { background: #23201b; color: #fffdfa; }

/* AI panel */
.board-ai { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.board-ai__head { display: flex; align-items: center; gap: 10px; color: #a85338; }
.board-ai__head h3 { margin: 0; font-size: 30px; font-weight: 600; }
.board-ai__p { margin: 0; font-size: 16px; line-height: 1.45; }
.board-ai__ready { display: flex; flex-direction: column; gap: 10px; }
.board-ai__note { font-size: 14px; }
.board-ready { display: grid; grid-template-columns: 96px 52px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15.5px; }
.board-ready__note { font-size: 14px; line-height: 1.35; color: #4a463f; }
.board-meter { display: flex; gap: 4px; }
.board-meter i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #8b8478; }
.board-meter.l-ok i { border-color: #2c6342; } .board-meter.l-ok i.on { background: #2c6342; }
.board-meter.l-stretch i { border-color: #b26a12; } .board-meter.l-stretch i.on { background: #b26a12; }
.board-meter.l-block i { border-color: #a8382e; } .board-meter.l-block i.on { background: #a8382e; }
.board-lvl { font-size: 13px; }
.board-lvl.l-ok { color: #2c6342; } .board-lvl.l-stretch { color: #8a520e; } .board-lvl.l-block { color: #a8382e; }

/* steps table */
.board-steps { display: flex; flex-direction: column; gap: 14px; }
.board-steps__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board-tblbox { overflow-x: auto; }
.board-tbl { width: 100%; min-width: 1060px; border-collapse: collapse; }
.board-tbl th { font-weight: 400; font-size: 13px; color: #6f6a60; text-align: left; padding: 0 8px 8px; white-space: nowrap; }
.board-tbl td { padding: 4px 8px; vertical-align: top; border-top: 1px dashed #e7e2d8; }
.board-tbl .board-in { font-size: 15.5px; padding: 5px 2px; }
.board-tbl tr.is-done .board-in { color: #8b8478; text-decoration: line-through; }
.board-tbl tfoot td { border-top: 1.5px solid #23201b; padding-top: 10px; font-size: 15px; }
.board-num { padding-top: 4px !important; }
.board-numbtn { font-family: 'Caveat', cursive !important; font-size: 24px; color: #a85338; border: 0; background: transparent; cursor: pointer; min-width: 32px; height: 34px; border-radius: 6px; }
.board-numbtn:hover { background: #f8e9e3; }
.board-pair { display: flex; gap: 6px; }
.board-in--time { width: 96px; flex: none; }
.board-unit { display: flex; align-items: baseline; gap: 4px; color: #6f6a60; font-size: 14px; }

/* plan */
.board-plan { display: flex; flex-direction: column; gap: 40px; }
.board-plan__intro { display: flex; flex-direction: column; gap: 6px; }
.board-plan__line { margin: 0; font-size: 20px; color: #4a463f; }
.board-finish { font-size: 30px; font-weight: 700; color: #2c6342; }
.board-stats4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.board-weekwrap { display: flex; flex-direction: column; gap: 14px; }
.board-weekhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.board-weeknav { margin-left: auto; display: inline-flex; gap: 2px; }
.board-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 20px; }
.board-day { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.board-day__head { display: flex; align-items: baseline; gap: 8px; border-bottom: 1.5px solid #23201b; padding-bottom: 4px; }
.board-day__head .board-hand { font-size: 26px; font-weight: 700; }
.board-day.is-today .board-day__head { border-bottom-color: #c2634a; }
.board-day.is-today .board-day__head .board-hand { color: #a85338; }
.board-day__free { font-size: 22px; color: #8b8478; padding: 4px 6px; }
.board-chip { display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px; border-radius: 6px; cursor: pointer; color: #23201b; }
.board-chip:hover { background: var(--t, #efebe3); }
.board-chip.is-done .board-chip__s { color: #8b8478; text-decoration: line-through; }
.board-chip__t { font-size: 12.5px; color: #6f6a60; white-space: nowrap; padding-top: 2px; min-width: 52px; }
.board-chip__s { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.board-chip__i { display: block; font-size: 12.5px; color: var(--c); }
.board-plan__lists { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.board-plan__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.board-plan__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.board-plan__side > div { display: flex; flex-direction: column; gap: 8px; }
.board-group { display: flex; flex-direction: column; gap: 4px; }
.board-group__name { font-size: 24px; font-weight: 700; }
.board-planrow { display: grid !important; grid-template-columns: minmax(0, 1fr) 140px 96px; gap: 16px; align-items: center !important; }
.board-planrow__bar { display: flex; flex-direction: column; gap: 3px; }
.board-bar { height: 6px; border-radius: 3px; background: #ece7de; overflow: hidden; display: block; }
.board-bar span { display: block; height: 100%; background: var(--c); border-radius: 3px; }

/* narrow (side panel) */
@media (max-width: 640px) {
  .board-wrap { padding: 28px 16px 64px; gap: 44px; }
  .board-sheet { padding: 24px 16px; }
  .board-h1 { font-size: 56px; }
  .board-title-in { font-size: 36px; }
  .board-stat b { font-size: 48px; }
  .board-header__stats { gap: 24px; }
  .board-planrow { grid-template-columns: minmax(0, 1fr) 96px; }
  .board-planrow > :last-child { display: none; }
}

/* ---- four-column board: filters, kinds, buy items, projects ---- */
.board-filters { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 4px -6px; }
.board-fpill { min-height: 32px; padding: 0 10px; border-radius: 6px; border: 0; background: transparent; font-size: 14px; color: #6f6a60; cursor: pointer; }
.board-fpill:hover { background: var(--t); }
.board-fpill.is-on { color: var(--c); background: var(--t); }
.board-mark--diamond { border-radius: 1px; transform: rotate(45deg) scale(.9); }
.board-mark--square { border-radius: 2px; }
.board-mark--cart { border: 0 !important; background: none !important; width: 16px; height: 16px; margin-top: 4px; color: var(--c); }
.board-tag .board-mark--cart { margin-top: 0; }
.board-item__price { flex: none; font-size: 15px; color: #6f6a60; padding-top: 1px; font-variant-numeric: tabular-nums; }
.board-tagword { color: var(--c); font-weight: 400; }
.board-foot { margin: 0; font-size: 13px; color: #6f6a60; padding: 4px 8px 0; }
.board-buytotal { margin: 0; font-size: 18px; display: flex; align-items: baseline; gap: 10px; }
.board-buytotal .board-hand { font-size: 32px; font-weight: 700; }
.board-protect { display: flex; flex-direction: column; gap: 8px; }
.board-pill--day { min-width: 46px; padding: 0 8px; }
.board-linked { display: flex; flex-direction: column; gap: 4px; }
.board-linkrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 6px; border-radius: 6px; font-size: 16px; color: #23201b; cursor: pointer; }
.board-linkrow:hover { background: var(--t); }
.board-chip--protect { border: 1.5px dashed #b9c9bd; background: rgba(230, 240, 232, .45); }

/* Small kind label on Todo's / Events rows ("to buy", "appt") */
.todos__kind { flex: none; font-size: 11px; line-height: 1; color: var(--accent-mid, #a85338); border: 1px solid var(--border, #e7e2d8); border-radius: 6px; padding: 3px 6px; margin-left: 6px; align-self: center; }