/* 属性バッジ */
.attr {
  font-size: 0.75em;
  padding: 0.1em 0.5em;
  border-radius: 1em;
  color: #fff;
  margin-left: 0.3em;
  vertical-align: middle;
  white-space: nowrap;
}
.attr-rose      { background: #d6425b; }
.attr-lily      { background: #428ac2; }
.attr-sunflower { background: #f1c943; color: #333; }
.attr-npc       { background: #bdbdbd; color: #333; }

/* デイリーストーリー一覧 */
/* flex で2列揃え + content-visibility: auto でビューポート外をスキップ。
   見た目は md-typeset table:not([class]) に揃える。 */
.gt-grid {
  display: block;
  border: .05rem solid var(--md-typeset-table-color);
  border-radius: .1rem;
  font-size: .64rem;
  overflow: auto;
}
.gt-row {
  display: flex;
  align-items: stretch;
  /* ビューポート外の行のレイアウト・ペイントをスキップ */
  content-visibility: auto;
  contain-intrinsic-block-size: auto 42px;
  transition: background-color 125ms;
}
.gt-row + .gt-row {
  border-top: .05rem solid var(--md-typeset-table-color);
}
.gt-header {
  font-weight: 700;
}
.gt-row:hover {
  background-color: var(--md-typeset-table-color--light);
}
.gt-row.filtered-out,
tr.filtered-out {
  display: none;
}
.gt-title {
  flex: 0 0 40%;
  font-weight: 700;
  word-break: break-word;
  padding: .9375em 1.25em;
}
.gt-tags {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  padding: .9375em 1.25em;
}
.grid-table .attr {
  font-size: 0.9em;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.grid-table .attr:hover {
  opacity: 0.85;
}

/* デイリーストーリー フィルター */
.gt-filter {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.8em;
}
.gt-filter::before {
  content: "🔍";
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
}
.gt-filter-input {
  flex: 1;
  padding: 0.5em 0.8em;
  font-size: 0.95em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.3em;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  outline: none;
  transition: border-color 0.2s;
}
.gt-filter-input:focus {
  border-color: var(--md-primary-fg-color);
}
.gt-filter-input::placeholder {
  color: var(--md-default-fg-color--light);
  font-size: 0.85em;
}
.gt-filter-count {
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* フィルター状態 */
.grid-table .attr.filter-active {
  box-shadow: 0 0 0 2px var(--md-primary-fg-color);
}
.grid-table .attr.filter-excluded {
  opacity: 0.4;
  text-decoration: line-through;
}
/* .gt-row.filtered-out は上部で定義済み */