/* Taskerator — design tokens that are consumed only by hand-written CSS
   (not by Tailwind utilities). The colour, typography, radius, and
   shadow tokens that back utilities live in
   app/assets/tailwind/application.css under @theme. This file is served
   as-is by Propshaft via stylesheet_link_tag :app. */

/* DM Sans, self-hosted from app/assets/fonts/. Both files are variable
   fonts covering the 400-700 weight range used by --font-sans. The
   unicode-range split lets the browser skip the latin-ext download for
   pages that don't need extended Latin glyphs. Propshaft fingerprints
   the url() references at build time. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-latin-fe3ac7ee.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/dm-sans-latin-ext-c1985016.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Layout dimensions (mirrors of the @theme width/height tokens for
     hand-written CSS that does not go through Tailwind). */
  --sidebar-width:    188px;
  --header-height:    48px;
  --toolbar-height:   40px;
  --bottombar-height: 64px;

  /* Row padding (density). Mobile rows are taller for touch targets;
     desktop tightens up. */
  --row-py-mobile:  11px;
  --row-py-desktop: 7px;
}

/* ── Component utility classes ───────────────────────────────────────
   These are component-style classes, not single-property utilities,
   so they live here rather than in @theme. They reference the colour
   tokens emitted by @theme (var(--color-p), var(--color-n100), etc.). */

/* Due date pill. */
.due-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--color-n100);
  color: var(--color-n600);
  border: 1px solid var(--color-n200);
  white-space: nowrap;
  flex-shrink: 0;
}

.due-pill.today {
  background: var(--color-warn-lt);
  color: var(--color-warn);
  border-color: #fde68a;
}

/* Section header. */
.section-hd {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-n500);
}

.section-badge {
  background: var(--color-n200);
  color: var(--color-n600);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
}

/* Active card outline for the FVP chain card. */
.chain-card-active {
  box-shadow: 0 2px 12px rgba(0, 102, 204, 0.07), 0 0 0 1.5px var(--color-p);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

/* Task checkbox. */
.task-cb {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--color-n300);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-cb.checked {
  background: var(--color-ok);
  border-color: var(--color-ok);
}

/* "Working on" label (chain anchor item in the Today view chain card). */
.working-on-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-p);
  background: var(--color-p-lt);
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-block;
}

/* "Now" tag for the focus-mode active card. Shares the working-on-badge
   palette but uses a slightly larger pill so it reads as the focal point
   on a single-task screen rather than as a sibling label inside a row. */
.now-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-p);
  background: var(--color-p-lt);
  padding: 3px 9px;
  border-radius: 6px;
  display: inline-block;
}

/* Row inside the focus-mode "Up next" queue. WebAwesome's wa-native layer
   resets <li> with `margin-inline-start: 1.125em; padding: 0` and that
   layer is declared after Tailwind's utilities layer, so px-* / py-* /
   m-* utilities lose the cascade on every <li>. Rolling the row layout
   into a single hand-written class keeps it unlayered (which beats both
   layers) and pins the touch-target height we need on mobile. */
.focus-queue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-n700);
}

/* Due date quick-pick chip used in the task detail sheet. */
.due-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 14px;
  background: var(--color-n100);
  color: var(--color-n700);
  border: 1px solid var(--color-n200);
  cursor: pointer;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}

.due-chip:hover {
  background: var(--color-n200);
}

.due-chip.active {
  background: var(--color-p);
  color: var(--color-n0);
  border-color: var(--color-p);
}

/* Highlight applied to a todo row in the desktop split's "ALL TASKS"
   reference column when the row belongs to the active chain. The blue
   left border + tinted background pull the chain's members out of the
   surrounding list so users can see the shape of the chain without
   leaving the all-tasks view. */
.chain-row-highlight {
  background: var(--color-p-lt);
  box-shadow: inset 3px 0 0 var(--color-p);
  padding-left: 8px;
}

/* Toggle switch. */
.toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch.on  { background: var(--color-p); }
.toggle-switch.off { background: var(--color-n300); }

.toggle-thumb {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.on  .toggle-thumb { transform: translateX(16px); }
.toggle-switch.off .toggle-thumb { transform: translateX(0); }

/* Sidebar section heading — small uppercase label above each group. */
.sidebar-section {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-n500);
  padding: 6px 10px 3px;
}

/* Sidebar entry — a tappable row in the desktop sidebar or mobile drawer. */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 1px;
  transition: background 0.13s, color 0.13s;
}

.sidebar-item:hover {
  background: var(--color-n100);
}

/* Tailwind preflight is disabled (see app/assets/tailwind/application.css)
   so the browser's native <button> chrome — ButtonFace background, system
   border, centred font, appearance: auto — bleeds through utilities like
   bg-transparent. .bare-button strips that chrome on the buttons we style
   ourselves. WebAwesome's own components live in shadow DOM and are not
   affected. */
.bare-button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* button_to renders a <form> wrapper; flatten it so the inner button can be
   styled like a sidebar-item without inheriting form spacing. The button
   keeps the .sidebar-item layout (display:flex, padding) intact — only
   the browser chrome is reset. */
.sidebar-item-form {
  display: block;
  margin: 0;
}

.sidebar-item-form button.sidebar-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  justify-content: flex-start;
}

/* Main content padding compensates for the fixed mobile chrome (header
   and bottom bar). On lg: viewports the chrome is hidden so the padding
   collapses. */
.layout-main {
  padding-top: var(--header-height);
  padding-bottom: calc(var(--bottombar-height) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  .layout-main {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* The chain strip flows edge-to-edge inside the chain-mode list, so the
   default <wa-details> padding around the summary and content needs to
   collapse. We do it via ::part() so the override targets the
   component's shadow DOM directly. */
wa-details.todo-chain-strip::part(header) {
  padding: 0.5rem 1rem;
}

wa-details.todo-chain-strip::part(content) {
  padding: 0;
}

/* WebAwesome's <wa-details> sets --spacing: var(--wa-space-l) on the
   host to size its own padding, but Tailwind 4 names its base spacing
   token --spacing as well, so slotted descendants inherit the WA value
   and every Tailwind spacing utility (px-*, gap-*, m-*, ...) inside the
   strip ends up roughly 4x too large. Restoring 0.25rem on the slotted
   children isolates the WA token to the component's own internals while
   letting Tailwind utilities work as expected inside the strip. */
wa-details.todo-chain-strip > * {
  --spacing: 0.25rem;
}