/* -----------------------------------------------------------------------
   pirtuk — dark terminal theme
   ----------------------------------------------------------------------- */

:root {
  --bg:          #0a0a0a;
  --surface:     #111111;
  --surface-2:   #1a1a1a;
  --text:        #c8c8c8;
  --text-2:      #888888;
  --text-3:      #585858;
  --text-4:      #383838;
  --green:       #5af78e;
  --green-dim:   rgba(90, 247, 142, .15);
  --cyan:        #8be9fd;
  --cyan-dim:    rgba(139, 233, 253, .1);
  --yellow:      #f1fa8c;
  --yellow-dim:  rgba(241, 250, 140, .1);
  --red:         #ff5555;
  --red-dim:     rgba(255, 85, 85, .12);
  --border:      #222222;
  --font:        'SF Mono', ui-monospace, 'Cascadia Code',
                 'Fira Code', 'JetBrains Mono', monospace;
  --nav-h:       40px;
}

/* -----------------------------------------------------------------------
   Reset & base
   ----------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input { font-family: inherit; }

::selection {
  background: var(--green-dim);
  color: var(--green);
}

/* -----------------------------------------------------------------------
   Navigation
   ----------------------------------------------------------------------- */

.nav {
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: .15rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__link {
  color: var(--text-3);
  font-size: .8rem;
  padding: .25rem .6rem;
  transition: color .12s ease;
}

.nav__link:hover { color: var(--text-2); }

.nav__link--active {
  color: var(--green);
}

.nav__logout-form { margin-left: auto; }

.nav__logout {
  background: none;
  border: none;
  color: var(--text-4);
  font-size: .75rem;
  padding: .25rem .5rem;
  cursor: pointer;
  transition: color .12s ease;
}

.nav__logout:hover { color: var(--red); }

@media (max-width: 480px) {
  .nav {
    height: auto;
    min-height: var(--nav-h);
    flex-wrap: wrap;
    padding: .35rem .5rem;
    gap: 0;
  }
  .nav__link {
    font-size: .75rem;
    padding: .25rem .4rem;
  }
  .nav__logout-form { margin-left: auto; }
  .nav__logout { font-size: .7rem; padding: .25rem .35rem; }
}

/* -----------------------------------------------------------------------
   Page layout
   ----------------------------------------------------------------------- */

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.page-header .page-title { margin-bottom: 0; }

.page-title {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-3);
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.page-title::before {
  content: ">";
  color: var(--green);
}

.refresh-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: .85rem;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}

.refresh-btn:hover {
  color: var(--green);
  border-color: var(--green);
}

.page-title__sub {
  font-size: .8rem;
  color: var(--text-4);
}

/* -----------------------------------------------------------------------
   Card
   ----------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .85rem 1rem;
  margin-bottom: .75rem;
}

.card--accent {
  border-left: 2px solid var(--green);
}

.card__label {
  font-size: .7rem;
  font-weight: 400;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

.card--accent .card__label { color: var(--green); }

/* -----------------------------------------------------------------------
   Activity (Now page)
   ----------------------------------------------------------------------- */

.activity {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--green);
}

.empty-note {
  font-size: .85rem;
  color: var(--text-3);
  font-style: italic;
}

/* -----------------------------------------------------------------------
   Event list
   ----------------------------------------------------------------------- */

.events {
  display: flex;
  flex-direction: column;
}

.event {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
}

.event:last-child { border-bottom: none; }

.event--active .event__name {
  color: var(--cyan);
}

.event__time {
  flex-shrink: 0;
  min-width: 5rem;
  font-size: .75rem;
  color: var(--text-3);
  padding-top: .1rem;
  font-variant-numeric: tabular-nums;
}

.event__body { flex: 1; min-width: 0; }

.event__name {
  font-size: .85rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.event__location {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: .05rem;
}

/* -----------------------------------------------------------------------
   Schedule table
   ----------------------------------------------------------------------- */

.schedule {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.schedule td {
  padding: .35rem .25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

.schedule tr:last-child td { border-bottom: none; }

.schedule tr.current td {
  color: var(--green);
}

.schedule__time {
  color: var(--text-3);
  white-space: nowrap;
  width: 4.5rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   Block list
   ----------------------------------------------------------------------- */

.blocks { display: flex; flex-direction: column; }

.block {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}

.block:last-child { border-bottom: none; }

.block--done { opacity: .3; }
.block--done .block__name {
  text-decoration: line-through;
  text-decoration-color: var(--text-4);
}

.block__glyph {
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--text-4);
  width: .9rem;
  text-align: center;
  margin-top: .15rem;
}

.block--in-progress .block__glyph { color: var(--cyan); }

.block__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.block__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
}

.block__name {
  overflow-wrap: break-word;
  word-break: break-word;
}

.block__badge {
  font-size: .65rem;
  color: var(--text-3);
  border: 1px solid var(--border);
  padding: 0 .3rem;
  flex-shrink: 0;
}

.block__id {
  font-size: .65rem;
  color: var(--text-4);
  flex-shrink: 0;
  text-decoration: none;
  transition: color .12s ease;
}

.block__id:hover {
  color: var(--green);
}

/* -----------------------------------------------------------------------
   Expandable block tree
   ----------------------------------------------------------------------- */

.block--parent {
  display: block;
  padding: 0;
}

.block-details { width: 100%; }

.block-summary {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .4rem 0;
  min-height: 36px;
  cursor: pointer;
  outline: none;
  list-style: none;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.block-summary::-webkit-details-marker { display: none; }
.block-summary::marker { content: none; }

.block-details[open] > .block-summary {
  border-bottom-color: transparent;
}

.block__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
  color: var(--text-4);
  font-size: .9rem;
  line-height: 1;
  transition: transform .12s ease;
}

.block__chevron::before { content: "\25B6"; font-size: .55rem; }

.block-details[open] > .block-summary > .block__chevron::before {
  content: "\25BC"; font-size: .55rem;
}

.block-details[open] > .block-summary > .block__chevron {
  transform: none;
}

.blocks--sub {
  border-left: 1px solid var(--text-4);
  margin-left: .6rem;
  padding-left: .6rem;
  padding-bottom: .15rem;
}

.blocks--sub .blocks--sub {
  margin-left: .5rem;
  padding-left: .5rem;
}

.blocks--sub .blocks--sub .blocks--sub {
  margin-left: .4rem;
  padding-left: .4rem;
  border-left-color: var(--border);
}

.blocks--sub .blocks--sub .blocks--sub .blocks--sub {
  margin-left: .3rem;
  padding-left: .3rem;
}

.blocks--sub > li > .block > .block__body .block__name,
.blocks--sub > li > .block-details > .block-summary .block__name {
  font-size: .82rem;
  color: var(--text-2);
}

.blocks--sub .blocks--sub > li > .block > .block__body .block__name,
.blocks--sub .blocks--sub > li > .block-details
  > .block-summary .block__name {
  font-size: .8rem;
}

.blocks--sub .blocks--sub .blocks--sub .block__id {
  display: none;
}

.blocks--sub > li:last-child > .block,
.blocks--sub > li:last-child > .block-details > .block-summary {
  border-bottom: none;
}

/* -----------------------------------------------------------------------
   Project blocks
   ----------------------------------------------------------------------- */

.block--project > .block-details > .block-summary > .block__glyph,
.block--project > .block__glyph {
  display: none;
}

.block--project > .block-details > .block-summary .block__name,
.block--project > .block__body .block__name {
  color: var(--yellow);
  font-size: .9rem;
}

.block--project {
  margin-top: .4rem;
  padding-top: .6rem;
}

/* -----------------------------------------------------------------------
   Note blocks
   ----------------------------------------------------------------------- */

.block--note > .block-details > .block-summary .block__name,
.block--note > .block__body .block__name {
  color: var(--text-2);
  font-style: italic;
}

.block--note > .block-details > .block-summary > .block__glyph,
.block--note > .block__glyph {
  color: var(--text-3);
}

/* -----------------------------------------------------------------------
   Description lines
   ----------------------------------------------------------------------- */

.block__desc {
  font-size: .75rem;
  color: var(--text-3);
  line-height: 1.5;
  padding: .05rem 0 .1rem;
}

/* -----------------------------------------------------------------------
   Metadata badges
   ----------------------------------------------------------------------- */

.block__badge--pri {
  color: var(--red);
  border-color: rgba(255, 85, 85, .3);
}

.block__badge--due {
  color: var(--cyan);
  border-color: rgba(139, 233, 253, .25);
}

/* -----------------------------------------------------------------------
   Feed list
   ----------------------------------------------------------------------- */

.feed-group { padding: 0; }

.feed-details { width: 100%; }

.feed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  cursor: pointer;
  outline: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.feed-summary::-webkit-details-marker { display: none; }
.feed-summary::marker { content: none; }

.feed-summary .card__label { margin-bottom: 0; }

.feed-header {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feed-url {
  font-size: .6rem;
  color: var(--text-4);
  opacity: .5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-4);
  font-size: .85rem;
  transition: transform .12s ease;
}

.feed-chevron::before { content: "+"; }

.feed-details[open] > .feed-summary > .feed-chevron::before {
  content: "-";
}

.feed-list {
  display: flex;
  flex-direction: column;
  padding: 0 1rem .75rem;
}

.feed-item {
  border-bottom: 1px solid var(--border);
}

.feed-item:last-child { border-bottom: none; }

.feed-item__link {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem 0;
  transition: color .12s ease;
}

.feed-item__link:hover { color: var(--green); }

.feed-item__body {
  flex: 1;
  min-width: 0;
  text-align: start;
}

.feed-item__title {
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  display: block;
}

.feed-item__desc {
  font-size: .72rem;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: .1rem;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-item__date {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}

/* -----------------------------------------------------------------------
   Week view
   ----------------------------------------------------------------------- */

.week-day--today .card__label { color: var(--green); }

/* -----------------------------------------------------------------------
   Login
   ----------------------------------------------------------------------- */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--bg);
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2rem 1.75rem 1.75rem;
}

.login-card__logo {
  text-align: center;
  font-size: 1rem;
  color: var(--green);
  margin-bottom: 1.5rem;
}

.login-card__logo::before { content: "$ "; color: var(--text-3); }

.login-error {
  background: var(--red-dim);
  border: 1px solid rgba(255, 85, 85, .3);
  color: var(--red);
  padding: .45rem .7rem;
  font-size: .8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.field { margin-bottom: .85rem; }

.field__label {
  display: block;
  font-size: .7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

.field__input {
  display: block;
  width: 100%;
  padding: .5rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text);
  outline: none;
  transition: border-color .12s ease;
}

.field__input:focus {
  border-color: var(--green);
}

.field__textarea {
  resize: vertical;
  font-family: inherit;
  min-height: 4rem;
}

.login-btn {
  display: block;
  width: 100%;
  padding: .55rem;
  background: var(--green);
  color: var(--bg);
  border: none;
  font-size: .85rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: opacity .12s ease;
}

.login-btn:hover { opacity: .85; }
.login-btn:active { opacity: .7; }

/* -----------------------------------------------------------------------
   Add block form
   ----------------------------------------------------------------------- */

.nav__link--add {
  font-size: .95rem;
  font-weight: 600;
}

.add-form { max-width: 100%; }

.add-form .field__input {
  background: var(--bg);
}

.add-options {
  display: flex;
  gap: 1.25rem;
  margin: .5rem 0;
}

.add-check {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--text-2);
  cursor: pointer;
}

.add-check input[type="checkbox"] {
  accent-color: var(--green);
}