/* ===== Twitter-like Reference Archives (archive_prot を参考) ===== */
:root{
  --bg:#0f1419;
  --card:#151a21;
  --card-2:#1b212a;
  --text:#e6e9ee;
  --sub:#9aa4b2;
  --line:#243041;
  --accent:#1d9bf0;
  --accent-2:#1a8cd8;
  --danger:#f91880;
  --shadow:0 8px 28px rgba(3,10,18,.35);
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:8px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#fafbfc;
    --card:#fff;
    --card-2:#f7f9fc;
    --text:#0f1419;
    --sub:#536471;
    --line:#e6ecf0;
    --shadow:0 4px 20px rgba(15,20,25,.08);
  }
}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
}

button,input{ font-family:inherit; }

/* ===== Base Components ===== */
.btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  font-size:14px;
  padding:10px 16px;
  cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover{ background:var(--accent-2); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.tag-pill{
  appearance:none; -webkit-appearance:none;
  font-size:12px;
  color:var(--sub);
  background:none;
  border:none;
  padding:0;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:color .15s ease;
}
.tag-pill:hover{
  color:var(--accent);
  text-decoration:underline;
}

.menu-panel{
  inset:auto;
  list-style:none;
  position-area:bottom span-left;
  flex-direction:column;
  padding:6px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}
.menu-panel:popover-open{ display:flex; }

.menu-item{
  appearance:none; -webkit-appearance:none;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:transparent;
  border:none;
  border-radius:var(--radius-xs);
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.menu-item:hover{ background:var(--card-2); }
.menu-item--danger{ color:var(--danger); }

/* ===== Header ===== */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--card);
}

.site-header__inner{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 12px;
}

.site-header__logo{
  font-size:22px;
  font-weight:700;
  color:var(--text);
  text-decoration:none;
}

.account-menu__trigger{
  appearance:none; -webkit-appearance:none;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  display:block;
  border-radius:50%;
}
.account-menu__trigger:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.account-menu__avatar{
  display:block;
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  background:var(--card-2);
  border:1px solid var(--line);
}

.account-menu__avatar--initial{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--sub);
}

.account-menu__panel{
  margin:8px 0 0;
  min-width:160px;
}
.account-menu__panel form{ margin:0; }

.reference-archives{
  display:flex;
  justify-content:center;
  padding:0 0 80px;
}

.reference-archives__container{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
  padding:0 40px 0 300px;
}

.reference-archives__title{
  margin:40px 0 -8px;
  font-size:24px;
  font-weight:400;
}

/* turbo-frameはデフォルトdisplay:blockなので、grid itemを直接ラップすると
   .reference-archives__containerのグリッドレイアウトが崩れる。displayをcontentsにして
   子要素(.tag-filter / .reference-archives__main)を直接grid itemにする */
turbo-frame#reference_archives_list{
  display:contents;
}

/* ===== Create Form ===== */
.create-form{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 12px;
  margin-bottom:66px;
}

.create-form__body{ display:flex; flex-direction:column; gap:10px; }

.form{ display:flex; flex-direction:column; gap:10px; min-width:0; }

.form__row{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.create-form__tag-group{ display:flex; flex-direction:column; gap:6px; }
.create-form__tag-row{ display:flex; align-items:center; gap:16px; }
.create-form__tag-row .create-form__tag-field{ flex:1; min-width:0; }
.create-form__tag-field{
  display:flex;
  align-items:center;
  gap:13px;
  margin-left:12px;
  color:var(--sub);
  cursor:text;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.create-form__tag-field:focus-within{
  border-bottom-color:var(--line);
  color:var(--accent);
}
.create-form__tag-icon{ flex-shrink:0; }
.create-form__tag-input{
  appearance:none; -webkit-appearance:none;
  flex:1;
  min-width:0;
  background:none;
  border:none;
  padding:4px 0;
  color:var(--text);
  font-size:15px;
  outline:none;
}
.create-form__tag-input::placeholder{ color:var(--sub); opacity:.8; }

.form__label{
  font-size:12px; color:var(--sub); letter-spacing:.02em;
}
.create-form .form{ gap:10px; }

.form__input{
  appearance:none; -webkit-appearance:none;
  width:100%;
  box-sizing:border-box;
  background:var(--card-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
  outline:none;
  transition: border .15s ease, box-shadow .15s ease;
}
.form__input::placeholder{ color:var(--sub); opacity:.8; }
.form__input--large{
  padding:14px 16px;
  font-size:15px;
}
.form__input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.create-form__url-field{ position:relative; }
.create-form__url-field .form__input{
  padding-left:42px;
  border-color:transparent;
}
.create-form__url-field .form__input:focus{ border-color:var(--accent); }
.create-form__paste-btn{
  position:absolute;
  top:50%;
  left:6px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:none;
  border:none;
  border-radius:var(--radius-xs);
  color:var(--sub);
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.create-form__paste-btn:hover,
.create-form__paste-btn:focus-visible{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  outline:none;
}

.form__actions{ display:flex; align-items:center; gap:10px; justify-content:flex-start; margin-top:6px; }
.create-form__submit{
  flex-shrink:0;
  padding:12px 28px;
  font-size:15px;
  background:color-mix(in srgb, var(--sub) 40%, #000);
  border-color:color-mix(in srgb, var(--sub) 40%, #000);
}
.create-form__submit:hover{
  background:color-mix(in srgb, var(--sub) 25%, #000);
  border-color:color-mix(in srgb, var(--sub) 25%, #000);
}
.create-form__submit:disabled{
  background:var(--card-2);
  border-color:var(--line);
  color:color-mix(in srgb, var(--sub) 80%, transparent);
  opacity:1;
}

/* ===== Tag Suggestions ===== */
.tag-suggestions{
  flex:1;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin:8px 0 0 12px;
  animation:tag-suggestions-fade-in .2s ease;
}
.tag-suggestions[hidden]{ display:none; }
@keyframes tag-suggestions-fade-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}
.tag-suggestions__label{
  flex-basis:100%;
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
  color:var(--sub);
}
.tag-suggestions .tag-pill{
  font-size:14px;
  color:var(--accent);
}

/* フォームバリデーションエラー */
.form-errors{
  margin:0;
  padding:10px 14px;
  list-style:none;
  background:color-mix(in srgb, var(--danger) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-radius:var(--radius-sm);
  color:var(--danger);
  font-size:13px;
}
.form-errors li{ overflow-wrap:anywhere; }

/* ===== Tag Filter (複数タグ対応) ===== */
.tag-filter{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}

.tag-filter__label{
  font-size:13px;
  color:var(--sub);
  font-weight:600;
  white-space:nowrap;
}

.tag-filter__selected-tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:1;
}

.tag-filter__selected-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition: background .15s ease, transform .05s ease;
}

.tag-filter__selected-tag:hover{
  background:var(--accent-2);
  transform:translateY(-1px);
}

.tag-filter__remove{
  font-size:16px;
  font-weight:bold;
  line-height:1;
  opacity:0.8;
  transition: opacity .15s ease;
}

.tag-filter__selected-tag:hover .tag-filter__remove{
  opacity:1;
}

.tag-filter__clear{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:var(--sub);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tag-filter__clear:hover{
  background:color-mix(in srgb, var(--line) 40%, transparent);
  border-color:var(--sub);
  color:var(--text);
}

/* ===== Main Content Area (Sidebar + Timeline) ===== */
.reference-archives__main{
  display:contents;
}

.archives-section{
  min-width:0;
}

.reference-archives__title,
.create-form,
.tag-filter,
.archives-section{
  box-sizing:border-box;
  width:100%;
  max-width:960px;
  justify-self:center;
}

/* ===== Sidebar (Tags List) ===== */
.sidebar{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  z-index:5;
  box-sizing:border-box;
  width:260px;
  display:flex;
  flex-direction:column;
  gap:20px;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:24px 16px;
}

.sidebar__logo{
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.sidebar__section{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebar__search-field{
  position:relative;
  display:block;
}

.sidebar__search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--sub);
  pointer-events:none;
}

.sidebar__search{
  appearance:none; -webkit-appearance:none;
  width:100%;
  box-sizing:border-box;
  background:var(--card-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px 7px 34px;
  font-size:13px;
  outline:none;
}
.sidebar__search::placeholder{ color:var(--sub); opacity:.8; }
.sidebar__search:focus{
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.sidebar__footer{
  padding-top:16px;
  border-top:1px solid var(--line);
}

.sidebar .account-menu__panel{
  margin:0 0 8px;
  position-area:top span-right;
}

.sidebar__title{
  font-size:14px;
  font-weight:600;
  color:var(--sub);
  margin:0;
}

.sidebar__tags{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  overflow-y:auto;
}

.sidebar__tag-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.sidebar__tag-group-title{
  margin:0;
  font-size:12px;
  font-weight:700;
  color:var(--text);
}

.sidebar__tag-group-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}

.sidebar__tag{ font-size:13px; }

.sidebar__more{
  appearance:none; -webkit-appearance:none;
  align-self:flex-start;
  background:transparent;
  border:none;
  padding:0;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
.sidebar__more:hover{ border-color:var(--accent); }

.sidebar__empty{
  font-size:13px;
  color:var(--sub);
  text-align:center;
  padding:20px 0;
  margin:0;
}

.sidebar__close,
.sidebar-toggle{
  appearance:none; -webkit-appearance:none;
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:10px;
  color:var(--sub);
  cursor:pointer;
}
.sidebar__close:hover,
.sidebar-toggle:hover{ background:var(--card-2); color:var(--text); }

.sidebar-backdrop{ display:none; }

@media (max-width: 850px){
  .reference-archives__container{
    padding:0 16px;
  }
  .reference-archives__title{ margin-top:72px; }

  .sidebar-toggle{
    display:flex;
    position:fixed;
    top:16px;
    left:16px;
    z-index:4;
    background:var(--bg);
  }

  .sidebar{
    z-index:7;
    width:min(280px, 85vw);
    visibility:hidden;
    transform:translateX(-100%);
    transition:transform .25s ease, visibility 0s linear .25s;
  }
  .is-sidebar-open .sidebar{
    visibility:visible;
    transform:none;
    transition:transform .25s ease;
  }

  .sidebar__logo{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .sidebar__close{ display:flex; }

  .is-sidebar-open .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:6;
    background:rgba(0,0,0,.4);
  }
}

/* ===== Pagination ===== */
.pagination-wrapper{
  display:flex;
  justify-content:center;
  padding:20px 0;
}
.pagination-wrapper:not(:has(.pagination)){ display:none; }

/* ===== Timeline & Tweet Card ===== */
.archives{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(max(300px, calc((100% - 10px) / 2)), 1fr));
  gap:24px 10px;
}

.archives-empty{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 16px;
  text-align:center;
  color:var(--sub);
  font-size:14px;
}

.archive{
  --archive-bg:var(--card);
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  background:var(--archive-bg);
  border-radius:var(--radius);
  position:relative;
  transition:background .2s ease, box-shadow .2s ease;
}
.archive:hover{
  --archive-bg:color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow:0 0 0 8px var(--archive-bg);
  z-index:1;
}

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

.archive__link-area{ position:relative; }

.archive__header{
  position:absolute;
  top:6px;
  right:6px;
  z-index:1;
}
.archive:has(.link-card__image) .archive__header{
  top:auto;
  bottom:-4px;
}

.archive-menu__trigger{
  appearance:none; -webkit-appearance:none;
  background:transparent;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:var(--text);
  cursor:pointer;
  transition:background .15s ease;
}
.archive-menu__trigger:hover,
.archive-menu:has(.archive-menu__panel:popover-open) .archive-menu__trigger{
  background:color-mix(in srgb, var(--sub) 22%, transparent);
}
.archive-menu__panel{
  margin:4px 0 0;
  min-width:180px;
}

.archive__text{ font-size:15px; line-height:1.6; word-break:break-all; padding:14px 56px 14px 14px; }
.archive__text:has(.link-card__image){ padding:0; }
.archive__url{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: border-color .15s ease, opacity .15s ease;
}
.archive__url:hover{ border-color:var(--accent); opacity:.95; }

.link-card{
  position:relative;
  display:block;
  width:100%;
  text-decoration:none;
  color:inherit;
}
.link-card--no-image{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xs);
  transition: border-color .15s ease;
}
.link-card--no-image:hover{ border-color:var(--accent); }
.link-card__image{
  display:block;
  width:100%;
  border-radius:var(--radius) var(--radius) 0 0;
  aspect-ratio: 4 / 2;
  object-fit:cover;
}
.link-card__footer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 48px 0 14px;
  background:var(--archive-bg);
  transition:background .2s ease;
  color:inherit;
}
.link-card--no-image .link-card__footer{
  position:static;
  padding:12px;
}
.link-card__title{
  min-width:0;
  font-size:16px;
  font-weight:bold;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.link-card__favicon{
  width:16px;
  height:16px;
  flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
}

.archive__tags{
  list-style:none;
  margin:0;
  display:flex; flex-wrap:wrap; gap:4px 12px;
  min-width:0;
  padding:0 14px 8px;
}
.archive__tags-empty{
  margin:0;
  font-size:11px;
  color:var(--sub);
}

.edit-form{
  border-top:1px solid var(--line);
  padding:12px 14px 14px;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 表示/編集フォームの切り替え */
.hidden{
  display:none !important;
}

/* ===== Flash Messages ===== */
turbo-frame#flash{
  position:fixed;
  top:16px;
  right:16px;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width:calc(100% - 32px);
}

.flash{
  box-sizing:border-box;
  max-width:420px;
  padding:14px 20px;
  border-radius:var(--radius-sm);
  font-size:15px;
  box-shadow:var(--shadow);
}
.flash--leaving{ animation:flash-fade-out .3s ease forwards; }
@keyframes flash-fade-out{
  to{ opacity:0; transform:translateY(-8px); }
}

.flash--notice{
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent);
}

.flash--alert{
  background:color-mix(in srgb, var(--danger) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color:var(--danger);
}

@media (max-width: 480px){
  .create-form{ padding:12px; border-radius:var(--radius-sm); }
}