/* Working panels built to match the app's own screens: the icon rail, the
   toolbar, the filter chips, the card styling and the floating input. */

.mini {
  --surface: #fff;
  --bg: #f6f5f3;
  --rail: #eeedeb;            /* --nav-bg */
  --line: #e4e2de;
  --text: #1a1a1a;
  --quiet: #78756f;
  --faint: #a8a49d;
  --accent: #e8613a;          /* the app's default accent */
  --accent-soft: #fce8e2;

  position: relative;
  display: flex;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: clamp(7.5px, .68vw, 11px);
  font-weight: 400;
  line-height: 1.25;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- The icon rail, as in every screen of the app ---------- */

.rail {
  flex: none;
  width: 4.35%;               /* 78px of the app's window */
  min-width: 2.4em;
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  padding: .9em 0;
}
.rail .n {
  margin-top: 0;
  width: 2.2em;
  height: 2.2em;
  border-radius: .55em;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 1.1em;
  display: grid;
  place-items: center;
}
.rail svg { width: 1.5em; height: 1.5em; stroke: #8a8680; fill: none; stroke-width: 1.6; }   /* --nav-icon */
.rail .on svg { stroke: #1a1a1a; }                                       /* --nav-icon-active */
.rail .on { background: rgba(0, 0, 0, .06); border-radius: .6em; padding: .3em; margin: -.3em; }
.rail .plus {
  margin-top: auto;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 400;
  font-size: 1.1em;
}

.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

/* ---------- Toolbar ---------- */

.tool {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding: 1em 1.2em .7em;
}
.tool h4 { font-size: 2em; font-weight: 500; letter-spacing: -.02em; }
.tool .sub { color: var(--quiet); font-size: 1.15em; }
.tool .chip-w {
  padding: .25em .6em;
  border-radius: 1em;
  background: #efedea;
  color: var(--quiet);
  font-size: .95em;
}
.tool .right { margin-left: auto; display: flex; align-items: center; gap: .5em; }
.pill {
  padding: .4em .9em;
  border-radius: 1.4em;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}
.seg { display: flex; padding: .2em; border-radius: 1.4em; background: #efedea; }
.seg span { padding: .35em .75em; border-radius: 1.2em; color: var(--quiet); }
.seg span.on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* The floating input the app keeps at the bottom of every screen */
.schedule {
  position: absolute;
  left: 50%;
  bottom: .8em;
  transform: translateX(-50%);
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6em 1em;
  border-radius: 2em;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .35);
  color: var(--faint);
}

/* ---------- Calendar ---------- */

.cal-wrap { flex: 1; display: grid; grid-template-columns: 23% 1fr; min-height: 0; }
.cal-pipe { border-right: 1px solid var(--line); background: var(--bg); padding: .8em; display: flex; flex-direction: column; gap: .5em; }
.cal-pipe-head { color: var(--faint); letter-spacing: .12em; text-transform: uppercase; font-size: .9em; }
.cal-chip {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .45em .5em;
  border-radius: .5em;
  background: #fff;
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
}
.cal-chip:active { cursor: grabbing; }
.cal-chip .box { flex: none; width: 1em; height: 1em; border-radius: .25em; border: 1.5px solid; }
.cal-chip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip .h { color: var(--faint); }
.cal-chip.is-ghost {
  position: fixed;
  z-index: 999;
  width: 150px;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5);
}
.cal-hint { margin-top: auto; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; font-size: .85em; }

.cal-days { display: grid; grid-template-columns: 2.6em repeat(5, 1fr); min-height: 0; }
.cal-gutter { border-right: 1px solid var(--line); }
.cal-gutter .slot { height: 11.11%; padding-right: .4em; text-align: right; color: var(--faint); font-size: .88em; }
.cal-col { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.cal-col:last-child { border-right: 0; }
.cal-head { padding: .5em .6em .45em; border-bottom: 1px solid var(--line); }
.cal-head .d { color: var(--faint); letter-spacing: .1em; text-transform: uppercase; font-size: .85em; }
.cal-head .n { display: flex; align-items: baseline; justify-content: space-between; gap: .4em; }
.cal-head .num { font-size: 1.7em; font-weight: 400; letter-spacing: -.02em; }
.cal-total { color: var(--faint); font-variant-numeric: tabular-nums; }
.cal-col.today .cal-head { box-shadow: inset 0 -2px 0 var(--accent); }
.cal-col.today .num { color: var(--accent); }

.cal-slots {
  position: relative;
  flex: 1;
  display: grid;
  gap: 1px;
  padding: 1px;
  min-height: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(11.11% - 1px),
      #f0eeea calc(11.11% - 1px), #f0eeea 11.11%);
}
.cal-slots.is-target { background-color: color-mix(in srgb, var(--accent) 7%, transparent); }

.cal-block {
  border-radius: .5em;        /* 8px */
  border-left: 2px solid;
  padding: .35em .5em;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15em;
}
.cal-block .t { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block .s { opacity: .65; font-size: .85em; }   /* the app's .time */
.cal-block.is-new { animation: drop-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes drop-in {
  from { transform: translateY(-5px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* The orange now-line, as on the app's calendar */
.now-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--accent); z-index: 2; }
.now-line .at {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: .4em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: .9em;
}
.now-line::before {
  content: '';
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Tasks ---------- */

.chips { flex: none; display: flex; flex-wrap: wrap; gap: .4em; padding: 0 1.2em .8em; }
.chips span {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .75em;
  border-radius: 1.4em;
  border: 1px solid var(--line);
  color: var(--quiet);
}
.chips span i { width: .55em; height: .55em; border-radius: 50%; }
.chips span.all { background: var(--accent); border-color: var(--accent); color: #fff; }

.board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; padding: 0 1.2em 1em; min-height: 0; }
.lane { display: flex; flex-direction: column; min-width: 0; }
.lane-head { display: flex; align-items: center; gap: .5em; padding-bottom: .6em; color: #b8b5b0; letter-spacing: .22em; text-transform: uppercase; font-size: .8em; font-weight: 500; }
.lane-count { padding: .1em .5em; border-radius: 1em; background: #efedea; color: var(--quiet); letter-spacing: 0; }
.lane-list { display: flex; flex-direction: column; gap: .5em; overflow: hidden; }

.task {
  display: flex;
  align-items: flex-start;
  gap: .55em;
  padding: .55em .6em;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: .6em;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .18s, box-shadow .18s;
}
.task:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .5); }
.task .box { flex: none; width: 1.05em; height: 1.05em; border-radius: .25em; border: 1.5px solid; display: grid; place-items: center; }
.task .box svg { width: .8em; height: .8em; stroke: #fff; stroke-width: 2.4; fill: none; display: none; }
.task.is-done .box { background: var(--accent); border-color: var(--accent); }
.task.is-done .box svg { display: block; }
.task .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35em; }
.task .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task.is-done .t { text-decoration: line-through; color: var(--faint); }
.task .tag { align-self: flex-start; padding: .15em .45em; border-radius: .3em; font-size: .92em; }
.task .h { flex: none; color: var(--faint); align-self: flex-end; }
.task.is-new { animation: drop-in .4s cubic-bezier(.2, .7, .2, 1); }

/* ---------- Projects ---------- */

.proj-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: 0 1.2em 1em; min-height: 0; }
.proj {
  border-radius: 1em;         /* --radius-lg, 16px */
  padding: .9em 1em;
  display: flex;
  flex-direction: column;
  gap: .15em;
  min-width: 0;
  transition: transform .18s;
}
.proj:hover { transform: translateY(-3px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); }
.proj .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .week { opacity: .55; letter-spacing: .1em; text-transform: uppercase; font-size: .82em; }
.proj .line { display: flex; align-items: baseline; gap: .4em; margin-top: auto; }
.proj .hours { font-size: 2.1em; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proj .money { font-variant-numeric: tabular-nums; opacity: .8; }
.proj .foot { opacity: .62; font-size: .85em; }
.proj .colour {
  align-self: flex-start;
  margin-top: .5em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .6em;
  border-radius: 1em;
  background: rgba(255, 255, 255, .6);
  font-size: .82em;
}
.proj .colour i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.proj .name { text-transform: uppercase; letter-spacing: .01em; }

/* ---------- Phone ---------- */

@media (max-width: 699px) {
  .mini { aspect-ratio: 4 / 3; font-size: 8px; }
  .rail { width: 3.4em; }
  .cal-wrap { grid-template-columns: 30% 1fr; }
  .cal-days { grid-template-columns: 2.2em repeat(5, 1fr); }
  .schedule { display: none; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .proj:nth-child(n+5) { display: none; }
  .chips span:nth-child(n+6) { display: none; }
}

/* ==========================================================
   The demo app: one Nigel shared by every plate on the page.
   The rail switches screens, and anything you change shows up
   in all of them, because they share one set of data.
   ========================================================== */

.demo .rail div { cursor: pointer; }
.demo .rail .on { background: #e9e7e3; }

.tool .icon-btn {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--quiet);
  cursor: pointer;
}
.tool .icon-btn svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 1.6; }
.pill { cursor: pointer; }

/* ---------- Dashboard screen ---------- */

.dash { flex: 1; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 0; }
.dash-face { position: relative; overflow: hidden; background: var(--bg); }
.dash-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-face .num { font-size: 13px; fill: #777470; }
.dash-face .num-major { font-size: 20px; font-weight: 400; fill: #333130; }
.dash-face .ring { stroke: #a7a49e; fill: none; }
.dash-face .tick { stroke: #97948e; }
.dash-face .arc-label { font-size: 10px; letter-spacing: .08em; }

.dash-side { border-left: 1px solid var(--line); padding: 1em 1.1em; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.dash-time { font-size: 3.4em; font-weight: 500; letter-spacing: -.03em; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.dash-greet { margin-top: .5em; font-weight: 500; font-size: 1.35em; }   /* 20px/600 live */
.dash-line { margin-top: .25em; color: #65635e; font-size: .92em; }
.dash-date { margin-top: .4em; color: #b8b5b0; font-size: .85em; }

.dash-now {
  margin-top: .9em;
  padding: .6em .7em;
  border-radius: .5em;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}
.dash-now .lab { color: var(--accent); letter-spacing: .12em; text-transform: uppercase; font-size: .85em; }
.dash-now .t { margin-top: .2em; font-weight: 500; }
.dash-now .s { margin-top: .15em; color: var(--quiet); font-size: .92em; }
.dash-now .track { margin-top: .5em; height: 2px; background: color-mix(in srgb, var(--accent) 22%, #fff); }
.dash-now .track i { display: block; height: 100%; background: var(--accent); }

.dash-head { margin-top: 1em; color: #b8b5b0; letter-spacing: .25em; text-transform: uppercase; font-size: .78em; font-weight: 500; }
.dash-list { margin-top: .4em; display: flex; flex-direction: column; gap: .35em; overflow: hidden; }
.dash-item { display: flex; align-items: baseline; gap: .6em; min-width: 0; }
.dash-item .h { flex: none; width: 3.2em; color: var(--faint); font-variant-numeric: tabular-nums; }
.dash-item .bar { flex: none; width: 2px; height: .9em; align-self: center; }
.dash-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item.past .t { color: var(--faint); text-decoration: line-through; }

/* ---------- Shared: the little empty states ---------- */

.empty { padding: .6em 0; color: var(--faint); font-style: normal; }

@media (max-width: 699px) {
  .dash { grid-template-columns: 1fr; }
  .dash-face { display: none; }
}


/* ---------- Matching the app as it runs now ---------- */

.demo .rail { gap: 1.35em; }
.demo .rail .n { border-radius: .6em; }   /* --radius-md, 10px */

/* The dashboard's own list of tasks, under today's schedule */
.dash-rule { margin: .9em 0 0; height: 1px; background: var(--line); }
.dash-task { display: flex; align-items: center; gap: .6em; padding: .25em 0; min-width: 0; }
.dash-task .box { flex: none; width: 1.05em; height: 1.05em; border-radius: .25em; border: 1.5px solid; }
.dash-task .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task .h { flex: none; color: var(--faint); }
.dash-add { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .5em; color: var(--faint); }
.dash-add .left { display: flex; align-items: center; gap: .5em; }
.dash-add .ring { width: 1.05em; height: 1.05em; border-radius: 50%; border: 1px solid currentColor; }
.dash-add .proj { padding: .25em .6em; border-radius: 1em; border: 1px dashed var(--line); }

/* The calendar's sidebar, as in the app: tabs, an input, then the lists */
.cal-pipe { width: auto; }
.cal-tabs { display: flex; gap: .7em; color: var(--faint); }
.cal-tabs b { color: var(--text); font-weight: 400; }
.cal-newtodo {
  margin-top: .5em;
  padding: .5em .6em;
  border-radius: .5em;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
}
.cal-group { margin-top: .8em; display: flex; align-items: center; gap: .5em; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; font-size: .85em; }
.cal-task { display: flex; align-items: center; gap: .55em; padding: .3em 0; cursor: grab; touch-action: none; min-width: 0; }
.cal-task:active { cursor: grabbing; }
.cal-task .box { flex: none; width: 1.05em; height: 1.05em; border-radius: .25em; border: 1.5px solid; }
.cal-task .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-task .h { flex: none; color: var(--faint); }
.cal-task.is-ghost {
  position: fixed;
  z-index: 999;
  width: 190px;
  padding: .4em .6em;
  border-radius: .5em;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5);
}

/* The dial can be spun, as in the app */
.dash-face { cursor: grab; touch-action: none; }
.dash-face.is-dragging { cursor: grabbing; }
.dash-face.is-browsing ~ .dash-side .dash-time { opacity: .55; }
.dash-now[hidden] { display: none; }